romo 0.0.1 → 0.1.0
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/.gitignore +2 -0
- data/Gemfile +9 -1
- data/README.md +1 -1
- data/assets/css/romo/_mixins.scss +486 -0
- data/assets/css/romo/_vars.scss +159 -0
- data/assets/css/romo/base.scss +454 -0
- data/assets/css/romo/buttons.scss +211 -0
- data/assets/css/romo/datepicker.scss +73 -0
- data/assets/css/romo/dropdown.scss +33 -0
- data/assets/css/romo/forms.scss +193 -0
- data/assets/css/romo/grid.scss +271 -0
- data/assets/css/romo/grid_table.scss +129 -0
- data/assets/css/romo/labels.scss +41 -0
- data/assets/css/romo/lists.scss +37 -0
- data/assets/css/romo/modal.scss +32 -0
- data/assets/css/romo/normalize.scss +425 -0
- data/assets/css/romo/select.scss +89 -0
- data/assets/css/romo/sortable.scss +14 -0
- data/assets/css/romo/table.scss +99 -0
- data/assets/css/romo/tabs.scss +71 -0
- data/assets/css/romo/tooltip.scss +89 -0
- data/assets/css/romo/z_index.scss +26 -0
- data/assets/js/romo/base.js +177 -0
- data/assets/js/romo/datepicker.js +541 -0
- data/assets/js/romo/dropdown.js +309 -0
- data/assets/js/romo/dropdown_form.js +92 -0
- data/assets/js/romo/form.js +182 -0
- data/assets/js/romo/indicator.js +88 -0
- data/assets/js/romo/inline.js +77 -0
- data/assets/js/romo/inline_form.js +86 -0
- data/assets/js/romo/invoke.js +87 -0
- data/assets/js/romo/modal.js +311 -0
- data/assets/js/romo/modal_form.js +101 -0
- data/assets/js/romo/select.js +139 -0
- data/assets/js/romo/select_dropdown.js +325 -0
- data/assets/js/romo/sortable.js +201 -0
- data/assets/js/romo/tooltip.js +258 -0
- data/lib/romo/dassets.rb +64 -0
- data/lib/romo/version.rb +1 -1
- data/lib/romo.rb +9 -0
- data/romo.gemspec +4 -2
- data/test/support/.gitkeep +0 -0
- data/test/system/.gitkeep +0 -0
- data/test/unit/dassets_tests.rb +67 -0
- data/test/unit/romo_tests.rb +21 -0
- metadata +53 -10
|
@@ -0,0 +1,454 @@
|
|
|
1
|
+
@import 'css/romo/vars';
|
|
2
|
+
@import 'css/romo/mixins';
|
|
3
|
+
|
|
4
|
+
/* Globals */
|
|
5
|
+
/* ------- */
|
|
6
|
+
|
|
7
|
+
*, *:before, *:after { @include border-box; }
|
|
8
|
+
|
|
9
|
+
html, body { height: 100%; }
|
|
10
|
+
|
|
11
|
+
body {
|
|
12
|
+
@include rm-push;
|
|
13
|
+
@include bg-base;
|
|
14
|
+
color: $baseColor;
|
|
15
|
+
font-weight: normal;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
*,
|
|
19
|
+
legend { @include border-base; }
|
|
20
|
+
|
|
21
|
+
table {
|
|
22
|
+
max-width: 100%;
|
|
23
|
+
background-color: transparent;
|
|
24
|
+
border-collapse: collapse;
|
|
25
|
+
border-spacing: 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
th,
|
|
29
|
+
td {
|
|
30
|
+
@include rm-pad;
|
|
31
|
+
@include rm-border;
|
|
32
|
+
@include align-left;
|
|
33
|
+
@include align-middle;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
ul, ol { @include list-styled; }
|
|
37
|
+
|
|
38
|
+
img {
|
|
39
|
+
width: auto\9;
|
|
40
|
+
height: auto;
|
|
41
|
+
max-width: 100%;
|
|
42
|
+
vertical-align: middle;
|
|
43
|
+
border: 0;
|
|
44
|
+
-ms-interpolation-mode: bicubic;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* Typography */
|
|
48
|
+
/* ---------- */
|
|
49
|
+
|
|
50
|
+
body {
|
|
51
|
+
font-family: $baseFontFamily;
|
|
52
|
+
font-size: $baseFontSize;
|
|
53
|
+
line-height: $baseLineHeight;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
p {
|
|
57
|
+
margin: 0 0 ($baseLineHeight / 2);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
small { font-size: 85%; } /* Ex: 14px base font * 85% = about 12px */
|
|
61
|
+
strong { font-weight: bold; }
|
|
62
|
+
em { font-style: italic; }
|
|
63
|
+
|
|
64
|
+
a,
|
|
65
|
+
a:link,
|
|
66
|
+
a:visited,
|
|
67
|
+
a:hover,
|
|
68
|
+
a:focus,
|
|
69
|
+
a:active {
|
|
70
|
+
outline: 0;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
a,
|
|
74
|
+
a:link,
|
|
75
|
+
a:visited {
|
|
76
|
+
color: $linkColor;
|
|
77
|
+
text-decoration: none;
|
|
78
|
+
}
|
|
79
|
+
a:hover,
|
|
80
|
+
a:focus,
|
|
81
|
+
a:active {
|
|
82
|
+
color: $linkColorHover;
|
|
83
|
+
text-decoration: underline;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
a.romo-text {
|
|
87
|
+
color: $baseColor;
|
|
88
|
+
text-decoration: none;
|
|
89
|
+
}
|
|
90
|
+
.romo-pointer { cursor: pointer; }
|
|
91
|
+
|
|
92
|
+
/* images */
|
|
93
|
+
|
|
94
|
+
.romo-img-rounded { @include border-radius(6px); }
|
|
95
|
+
.romo-img-circle { @include border-radius(500px); }
|
|
96
|
+
.romo-img-card {
|
|
97
|
+
padding: 3px;
|
|
98
|
+
background-color: $baseBackground;
|
|
99
|
+
border: 1px solid;
|
|
100
|
+
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
101
|
+
@include box-shadow(0 1px 3px rgba(0, 0, 0, 0.1));
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.romo-img0 { height: $imgHeight0 !important; }
|
|
105
|
+
.romo-img1 { height: $imgHeight1 !important; }
|
|
106
|
+
.romo-img2 { height: $imgHeight2 !important; }
|
|
107
|
+
.romo-img3 { height: $imgHeight3 !important; }
|
|
108
|
+
|
|
109
|
+
.romo-img-inline0 { line-height: $imgHeight0 !important; @include align-middle; }
|
|
110
|
+
.romo-img-inline1 { line-height: $imgHeight1 !important; @include align-middle; }
|
|
111
|
+
.romo-img-inline2 { line-height: $imgHeight2 !important; @include align-middle; }
|
|
112
|
+
.romo-img-inline3 { line-height: $imgHeight3 !important; @include align-middle; }
|
|
113
|
+
|
|
114
|
+
/* headings */
|
|
115
|
+
|
|
116
|
+
h1, h2, h3 {
|
|
117
|
+
margin: ($baseLineHeight / 2) 0;
|
|
118
|
+
font-weight: bold;
|
|
119
|
+
text-rendering: optimizelegibility;
|
|
120
|
+
small {
|
|
121
|
+
font-weight: normal;
|
|
122
|
+
line-height: 1;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
h1 { @include text3; }
|
|
127
|
+
h2 { @include text2; }
|
|
128
|
+
h3 { @include text1; }
|
|
129
|
+
|
|
130
|
+
/* text size */
|
|
131
|
+
|
|
132
|
+
.romo-text0,
|
|
133
|
+
.romo-text1,
|
|
134
|
+
.romo-text2,
|
|
135
|
+
.romo-text3 {
|
|
136
|
+
text-rendering: optimizelegibility;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.romo-text-small,
|
|
140
|
+
.romo-text0 { @include text0(!important); @include font-weight0; }
|
|
141
|
+
.romo-text1 { @include text1(!important); @include font-weight1; }
|
|
142
|
+
.romo-text-large,
|
|
143
|
+
.romo-text2 { @include text2(!important); @include font-weight2; }
|
|
144
|
+
.romo-text3 { @include text3(!important); @include font-weight3; }
|
|
145
|
+
|
|
146
|
+
/* text weight */
|
|
147
|
+
|
|
148
|
+
.romo-text-normal { @include font-weight(normal, !important); }
|
|
149
|
+
.romo-text-lighter { @include font-weight(lighter, !important); }
|
|
150
|
+
.romo-text-bold { @include font-weight(bold, !important); }
|
|
151
|
+
.romo-text-bolder { @include font-weight(bolder, !important); }
|
|
152
|
+
.romo-text-100 { @include font-weight(100, !important); }
|
|
153
|
+
.romo-text-200 { @include font-weight(200, !important); }
|
|
154
|
+
.romo-text-300 { @include font-weight(300, !important); }
|
|
155
|
+
.romo-text-400 { @include font-weight(400, !important); }
|
|
156
|
+
.romo-text-500 { @include font-weight(500, !important); }
|
|
157
|
+
.romo-text-600 { @include font-weight(600, !important); }
|
|
158
|
+
.romo-text-700 { @include font-weight(700, !important); }
|
|
159
|
+
.romo-text-800 { @include font-weight(800, !important); }
|
|
160
|
+
.romo-text-900 { @include font-weight(900, !important); }
|
|
161
|
+
|
|
162
|
+
/* alignment */
|
|
163
|
+
|
|
164
|
+
.romo-align-left { @include align-left(!important); }
|
|
165
|
+
.romo-align-center { @include align-center(!important); }
|
|
166
|
+
.romo-align-right { @include align-right(!important); }
|
|
167
|
+
|
|
168
|
+
.romo-align-top { @include align-top(!important); }
|
|
169
|
+
.romo-align-middle { @include align-middle(!important); }
|
|
170
|
+
.romo-align-bottom { @include align-bottom(!important); }
|
|
171
|
+
|
|
172
|
+
/* color emphasis */
|
|
173
|
+
|
|
174
|
+
.romo-bg-base { @include bg-base(!important); }
|
|
175
|
+
.romo-bg-alt { @include bg-alt(!important); }
|
|
176
|
+
.romo-bg-hover { @include bg-hover(!important); }
|
|
177
|
+
|
|
178
|
+
.romo-border-base { @include border-base(!important); }
|
|
179
|
+
.romo-border-alt { @include border-alt(!important); }
|
|
180
|
+
|
|
181
|
+
.romo-text-border-base { @include text-border-base(!important); }
|
|
182
|
+
.romo-text-border-alt { @include text-border-alt(!important); }
|
|
183
|
+
.romo-text-muted { @include text-muted(!important); }
|
|
184
|
+
.romo-text-warning { @include text-warning(!important); }
|
|
185
|
+
.romo-text-error { @include text-error(!important); }
|
|
186
|
+
.romo-text-info { @include text-info(!important); }
|
|
187
|
+
.romo-text-success { @include text-success(!important); }
|
|
188
|
+
.romo-text-inverse { @include text-inverse(!important); }
|
|
189
|
+
|
|
190
|
+
.romo-text-muted-hover:hover, a.romo-text-muted:hover, a.romo-text-muted:focus {
|
|
191
|
+
@include text-muted-hover(!important);
|
|
192
|
+
}
|
|
193
|
+
.romo-text-warning-hover:hover, a.romo-text-warning:hover, a.romo-text-warning:focus {
|
|
194
|
+
@include text-warning-hover(!important);
|
|
195
|
+
}
|
|
196
|
+
.romo-text-error-hover:hover, a.romo-text-error:hover, a.romo-text-error:focus {
|
|
197
|
+
@include text-error-hover(!important);
|
|
198
|
+
}
|
|
199
|
+
.romo-text-info-hover:hover, a.romo-text-info:hover, a.romo-text-info:focus {
|
|
200
|
+
@include text-info-hover(!important);
|
|
201
|
+
}
|
|
202
|
+
.romo-text-success-hover:hover, a.romo-text-success:hover, a.romo-text-success:focus {
|
|
203
|
+
@include text-success-hover(!important);
|
|
204
|
+
}
|
|
205
|
+
.romo-text-inverse-hover:hover, a.romo-text-inverse:hover, a.romo-text-inverse:focus {
|
|
206
|
+
@include text-inverse-hover(!important);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.romo-bg-muted { @include bg-muted(!important); }
|
|
210
|
+
.romo-bg-warning { @include bg-warning(!important); }
|
|
211
|
+
.romo-bg-error { @include bg-error(!important); }
|
|
212
|
+
.romo-bg-info { @include bg-info(!important); }
|
|
213
|
+
.romo-bg-success { @include bg-success(!important); }
|
|
214
|
+
.romo-bg-inverse { @include bg-inverse(!important); }
|
|
215
|
+
|
|
216
|
+
.romo-bg-muted-hover:hover, a.romo-bg-muted:hover, a.romo-bg-muted:focus {
|
|
217
|
+
@include bg-muted-hover(!important);
|
|
218
|
+
}
|
|
219
|
+
.romo-bg-warning-hover:hover, a.romo-bg-warning:hover, a.romo-bg-warning:focus {
|
|
220
|
+
@include bg-warning-hover(!important);
|
|
221
|
+
}
|
|
222
|
+
.romo-bg-error-hover:hover, a.romo-bg-error:hover, a.romo-bg-error:focus {
|
|
223
|
+
@include bg-error-hover(!important);
|
|
224
|
+
}
|
|
225
|
+
.romo-bg-info-hover:hover, a.romo-bg-info:hover, a.romo-bg-info:focus {
|
|
226
|
+
@include bg-info-hover(!important);
|
|
227
|
+
}
|
|
228
|
+
.romo-bg-success-hover:hover, a.romo-bg-success:hover, a.romo-bg-success:focus {
|
|
229
|
+
@include bg-success-hover(!important);
|
|
230
|
+
}
|
|
231
|
+
.romo-bg-inverse-hover:hover, a.romo-bg-inverse:hover, a.romo-bg-inverse:focus {
|
|
232
|
+
@include bg-inverse-hover(!important);
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.romo-border-muted { @include border-muted(!important); }
|
|
236
|
+
.romo-border-warning { @include border-warning(!important); }
|
|
237
|
+
.romo-border-error { @include border-error(!important); }
|
|
238
|
+
.romo-border-info { @include border-info(!important); }
|
|
239
|
+
.romo-border-success { @include border-success(!important); }
|
|
240
|
+
.romo-border-inverse { @include border-inverse(!important); }
|
|
241
|
+
|
|
242
|
+
/* Scaffolding */
|
|
243
|
+
/* ----------- */
|
|
244
|
+
|
|
245
|
+
/* border helpers */
|
|
246
|
+
|
|
247
|
+
.romo-border-solid { @include border-style(solid, !important); }
|
|
248
|
+
.romo-border-dashed { @include border-style(dashed, !important); }
|
|
249
|
+
.romo-border-dotted { @include border-style(dotted, !important); }
|
|
250
|
+
.romo-border-double { @include border-style(double, !important); }
|
|
251
|
+
.romo-border-groove { @include border-style(groove, !important); }
|
|
252
|
+
.romo-border-inset { @include border-style(inset, !important); }
|
|
253
|
+
.romo-border-hidden { @include border-style(hidden, !important); }
|
|
254
|
+
.romo-border-none { @include border-style(none, !important); }
|
|
255
|
+
|
|
256
|
+
.romo-border-solid-top { @include border-style-top(solid, !important); }
|
|
257
|
+
.romo-border-dashed-top { @include border-style-top(dashed, !important); }
|
|
258
|
+
.romo-border-dotted-top { @include border-style-top(dotted, !important); }
|
|
259
|
+
.romo-border-double-top { @include border-style-top(double, !important); }
|
|
260
|
+
.romo-border-groove-top { @include border-style-top(groove, !important); }
|
|
261
|
+
.romo-border-inset-top { @include border-style-top(inset, !important); }
|
|
262
|
+
.romo-border-hidden-top { @include border-style-top(hidden, !important); }
|
|
263
|
+
.romo-border-none-top { @include border-style-top(none, !important); }
|
|
264
|
+
|
|
265
|
+
.romo-border-solid-right { @include border-style-right(solid, !important); }
|
|
266
|
+
.romo-border-dashed-right { @include border-style-right(dashed, !important); }
|
|
267
|
+
.romo-border-dotted-right { @include border-style-right(dotted, !important); }
|
|
268
|
+
.romo-border-double-right { @include border-style-right(double, !important); }
|
|
269
|
+
.romo-border-groove-right { @include border-style-right(groove, !important); }
|
|
270
|
+
.romo-border-inset-right { @include border-style-right(inset, !important); }
|
|
271
|
+
.romo-border-hidden-right { @include border-style-right(hidden, !important); }
|
|
272
|
+
.romo-border-none-right { @include border-style-right(none, !important); }
|
|
273
|
+
|
|
274
|
+
.romo-border-solid-bottom { @include border-style-bottom(solid, !important); }
|
|
275
|
+
.romo-border-dashed-bottom { @include border-style-bottom(dashed, !important); }
|
|
276
|
+
.romo-border-dotted-bottom { @include border-style-bottom(dotted, !important); }
|
|
277
|
+
.romo-border-double-bottom { @include border-style-bottom(double, !important); }
|
|
278
|
+
.romo-border-groove-bottom { @include border-style-bottom(groove, !important); }
|
|
279
|
+
.romo-border-inset-bottom { @include border-style-bottom(inset, !important); }
|
|
280
|
+
.romo-border-hidden-bottom { @include border-style-bottom(hidden, !important); }
|
|
281
|
+
.romo-border-none-bottom { @include border-style-bottom(none, !important); }
|
|
282
|
+
|
|
283
|
+
.romo-border-solid-left { @include border-style-left(solid, !important); }
|
|
284
|
+
.romo-border-dashed-left { @include border-style-left(dashed, !important); }
|
|
285
|
+
.romo-border-dotted-left { @include border-style-left(dotted, !important); }
|
|
286
|
+
.romo-border-double-left { @include border-style-left(double, !important); }
|
|
287
|
+
.romo-border-groove-left { @include border-style-left(groove, !important); }
|
|
288
|
+
.romo-border-inset-left { @include border-style-left(inset, !important); }
|
|
289
|
+
.romo-border-hidden-left { @include border-style-left(hidden, !important); }
|
|
290
|
+
.romo-border-none-left { @include border-style-left(none, !important); }
|
|
291
|
+
|
|
292
|
+
.romo-border,
|
|
293
|
+
.romo-border1 { @include border1(!important); }
|
|
294
|
+
.romo-border0 { @include border0(!important); }
|
|
295
|
+
.romo-border2 { @include border2(!important); }
|
|
296
|
+
.romo-rm-border { @include rm-border(!important); }
|
|
297
|
+
|
|
298
|
+
.romo-border-top,
|
|
299
|
+
.romo-border1-top { @include border1-top(!important); }
|
|
300
|
+
.romo-border0-top { @include border0-top(!important); }
|
|
301
|
+
.romo-border2-top { @include border2-top(!important); }
|
|
302
|
+
.romo-rm-border-top { @include rm-border-top(!important); }
|
|
303
|
+
|
|
304
|
+
.romo-border-right,
|
|
305
|
+
.romo-border1-right { @include border1-right(!important); }
|
|
306
|
+
.romo-border0-right { @include border0-right(!important); }
|
|
307
|
+
.romo-border2-right { @include border2-right(!important); }
|
|
308
|
+
.romo-rm-border-right { @include rm-border-right(!important); }
|
|
309
|
+
|
|
310
|
+
.romo-border-bottom,
|
|
311
|
+
.romo-border1-bottom { @include border1-bottom(!important); }
|
|
312
|
+
.romo-border0-bottom { @include border0-bottom(!important); }
|
|
313
|
+
.romo-border2-bottom { @include border2-bottom(!important); }
|
|
314
|
+
.romo-rm-border-bottom { @include rm-border-bottom(!important); }
|
|
315
|
+
|
|
316
|
+
.romo-border-left,
|
|
317
|
+
.romo-border1-left { @include border1-left(!important); }
|
|
318
|
+
.romo-border0-left { @include border0-left(!important); }
|
|
319
|
+
.romo-border2-left { @include border2-left(!important); }
|
|
320
|
+
.romo-rm-border-left { @include rm-border-left(!important); }
|
|
321
|
+
|
|
322
|
+
.romo-border-radius,
|
|
323
|
+
.romo-border1-radius { @include border1-radius(!important); }
|
|
324
|
+
.romo-border0-radius { @include border0-radius(!important); }
|
|
325
|
+
.romo-border2-radius { @include border2-radius(!important); }
|
|
326
|
+
.romo-rm-border-radius { @include rm-border-radius(!important); }
|
|
327
|
+
|
|
328
|
+
.romo-border-top-left-radius,
|
|
329
|
+
.romo-border1-top-left-radius { @include border1-top-left-radius(!important); }
|
|
330
|
+
.romo-border0-top-left-radius { @include border0-top-left-radius(!important); }
|
|
331
|
+
.romo-border2-top-left-radius { @include border2-top-left-radius(!important); }
|
|
332
|
+
.romo-rm-border-top-left-radius { @include rm-border-top-left-radius(!important); }
|
|
333
|
+
|
|
334
|
+
.romo-border-top-right-radius,
|
|
335
|
+
.romo-border1-top-right-radius { @include border1-top-right-radius(!important); }
|
|
336
|
+
.romo-border0-top-right-radius { @include border0-top-right-radius(!important); }
|
|
337
|
+
.romo-border2-top-right-radius { @include border2-top-right-radius(!important); }
|
|
338
|
+
.romo-rm-border-top-right-radius { @include rm-border-top-right-radius(!important); }
|
|
339
|
+
|
|
340
|
+
.romo-border-bottom-right-radius,
|
|
341
|
+
.romo-border1-bottom-right-radius { @include border1-bottom-right-radius(!important); }
|
|
342
|
+
.romo-border0-bottom-right-radius { @include border0-bottom-right-radius(!important); }
|
|
343
|
+
.romo-border2-bottom-right-radius { @include border2-bottom-right-radius(!important); }
|
|
344
|
+
.romo-rm-border-bottom-right-radius { @include rm-border-bottom-right-radius(!important); }
|
|
345
|
+
|
|
346
|
+
.romo-border-bottom-left-radius,
|
|
347
|
+
.romo-border1-bottom-left-radius { @include border1-bottom-left-radius(!important); }
|
|
348
|
+
.romo-border0-bottom-left-radius { @include border0-bottom-left-radius(!important); }
|
|
349
|
+
.romo-border2-bottom-left-radius { @include border2-bottom-left-radius(!important); }
|
|
350
|
+
.romo-rm-border-bottom-left-radius { @include rm-border-bottom-left-radius(!important); }
|
|
351
|
+
|
|
352
|
+
/* spacing */
|
|
353
|
+
|
|
354
|
+
.romo-pad,
|
|
355
|
+
.romo-pad1 { @include pad1(!important); }
|
|
356
|
+
.romo-pad0 { @include pad0(!important); }
|
|
357
|
+
.romo-pad2 { @include pad2(!important); }
|
|
358
|
+
.romo-rm-pad { @include rm-pad(!important); }
|
|
359
|
+
|
|
360
|
+
.romo-pad-top,
|
|
361
|
+
.romo-pad1-top { @include pad1-top(!important); }
|
|
362
|
+
.romo-pad0-top { @include pad0-top(!important); }
|
|
363
|
+
.romo-pad2-top { @include pad2-top(!important); }
|
|
364
|
+
.romo-rm-pad-top { @include rm-pad-top(!important); }
|
|
365
|
+
|
|
366
|
+
.romo-pad-right,
|
|
367
|
+
.romo-pad1-right { @include pad1-right(!important); }
|
|
368
|
+
.romo-pad0-right { @include pad0-right(!important); }
|
|
369
|
+
.romo-pad2-right { @include pad2-right(!important); }
|
|
370
|
+
.romo-rm-pad-right { @include rm-pad-right(!important); }
|
|
371
|
+
|
|
372
|
+
.romo-pad-bottom,
|
|
373
|
+
.romo-pad1-bottom { @include pad1-bottom(!important); }
|
|
374
|
+
.romo-pad0-bottom { @include pad0-bottom(!important); }
|
|
375
|
+
.romo-pad2-bottom { @include pad2-bottom(!important); }
|
|
376
|
+
.romo-rm-pad-bottom { @include rm-pad-bottom(!important); }
|
|
377
|
+
|
|
378
|
+
.romo-pad-left,
|
|
379
|
+
.romo-pad1-left { @include pad1-left(!important); }
|
|
380
|
+
.romo-pad0-left { @include pad0-left(!important); }
|
|
381
|
+
.romo-pad2-left { @include pad2-left(!important); }
|
|
382
|
+
.romo-rm-pad-left { @include rm-pad-left(!important); }
|
|
383
|
+
|
|
384
|
+
.romo-push,
|
|
385
|
+
.romo-push1 { @include push1(!important); }
|
|
386
|
+
.romo-push0 { @include push0(!important); }
|
|
387
|
+
.romo-push2 { @include push2(!important); }
|
|
388
|
+
.romo-rm-push { @include rm-push(!important); }
|
|
389
|
+
|
|
390
|
+
.romo-push-top,
|
|
391
|
+
.romo-push1-top { @include push1-top(!important); }
|
|
392
|
+
.romo-push0-top { @include push0-top(!important); }
|
|
393
|
+
.romo-push2-top { @include push2-top(!important); }
|
|
394
|
+
.romo-rm-push-top { @include rm-push-top(!important); }
|
|
395
|
+
|
|
396
|
+
.romo-push-right,
|
|
397
|
+
.romo-push1-right { @include push1-right(!important); }
|
|
398
|
+
.romo-push0-right { @include push0-right(!important); }
|
|
399
|
+
.romo-push2-right { @include push2-right(!important); }
|
|
400
|
+
.romo-rm-push-right { @include rm-push-right(!important); }
|
|
401
|
+
|
|
402
|
+
.romo-push-bottom,
|
|
403
|
+
.romo-push1-bottom { @include push1-bottom(!important); }
|
|
404
|
+
.romo-push0-bottom { @include push0-bottom(!important); }
|
|
405
|
+
.romo-push2-bottom { @include push2-bottom(!important); }
|
|
406
|
+
.romo-rm-push-bottom { @include rm-push-bottom(!important); }
|
|
407
|
+
|
|
408
|
+
.romo-push-left,
|
|
409
|
+
.romo-push1-left { @include push1-left(!important); }
|
|
410
|
+
.romo-push0-left { @include push0-left(!important); }
|
|
411
|
+
.romo-push2-left { @include push2-left(!important); }
|
|
412
|
+
.romo-rm-push-left { @include rm-push-left(!important); }
|
|
413
|
+
|
|
414
|
+
/* other helpers */
|
|
415
|
+
|
|
416
|
+
.romo-match-line-height { line-height: 1 !important; }
|
|
417
|
+
|
|
418
|
+
.romo-nowrap { white-space: nowrap !important; }
|
|
419
|
+
.romo-crop { white-space: nowrap !important; overflow: hidden !important; }
|
|
420
|
+
|
|
421
|
+
.romo-inline { display: inline !important; }
|
|
422
|
+
.romo-inline-block { display: inline-block !important; }
|
|
423
|
+
.romo-inline-flex { @include display-inline-flex(!important); }
|
|
424
|
+
.romo-flex { @include display-flex(!important); }
|
|
425
|
+
.romo-block { display: block !important; }
|
|
426
|
+
|
|
427
|
+
.romo-relative { position: relative !important; }
|
|
428
|
+
.romo-absolute { position: absolute !important; }
|
|
429
|
+
.romo-absolute-fill {
|
|
430
|
+
position: absolute;
|
|
431
|
+
top: 0;
|
|
432
|
+
right: 0;
|
|
433
|
+
bottom: 0;
|
|
434
|
+
left: 0;
|
|
435
|
+
}
|
|
436
|
+
.romo-fixed { position: fixed !important; }
|
|
437
|
+
|
|
438
|
+
.romo-clearfix { @include clearfix; }
|
|
439
|
+
.romo-pull-left,
|
|
440
|
+
.romo-float-left { float: left !important; }
|
|
441
|
+
.romo-pull-right,
|
|
442
|
+
.romo-float-right { float: right !important; }
|
|
443
|
+
|
|
444
|
+
.romo-overflow-hidden { overflow: hidden !important; }
|
|
445
|
+
.romo-overflow-auto { overflow: auto !important; }
|
|
446
|
+
.romo-overflow-scroll { overflow: scroll !important; }
|
|
447
|
+
|
|
448
|
+
.romo-overflow-x-hidden { overflow-x: hidden !important; }
|
|
449
|
+
.romo-overflow-x-auto { overflow-x: auto !important; }
|
|
450
|
+
.romo-overflow-x-scroll { overflow-x: scroll !important; }
|
|
451
|
+
|
|
452
|
+
.romo-overflow-y-hidden { overflow-y: hidden !important; }
|
|
453
|
+
.romo-overflow-y-auto { overflow-y: auto !important; }
|
|
454
|
+
.romo-overflow-y-scroll { overflow-y: scroll !important; }
|
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
@import 'css/romo/vars';
|
|
2
|
+
@import 'css/romo/mixins';
|
|
3
|
+
|
|
4
|
+
a.romo-btn,
|
|
5
|
+
button.romo-btn,
|
|
6
|
+
.romo-btn {
|
|
7
|
+
display: inline-block;
|
|
8
|
+
@include rm-push;
|
|
9
|
+
@include align-center;
|
|
10
|
+
@include align-middle;
|
|
11
|
+
|
|
12
|
+
@include button-bg($btnBackground, $btnBackgroundHighlight, $btnColor);
|
|
13
|
+
@include border1;
|
|
14
|
+
border-color: $btnBorder;
|
|
15
|
+
border-bottom-color: darken($btnBorder, 10%);
|
|
16
|
+
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
a.romo-btn,
|
|
20
|
+
button.romo-btn { cursor: pointer; }
|
|
21
|
+
|
|
22
|
+
a.romo-btn:hover,
|
|
23
|
+
button.romo-btn:hover,
|
|
24
|
+
a.romo-btn:focus,
|
|
25
|
+
button.romo-btn:focus {
|
|
26
|
+
color: $btnColorHover;
|
|
27
|
+
text-decoration: none;
|
|
28
|
+
background-position: 0 -15px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.romo-btn:focus{ outline: none; }
|
|
32
|
+
.romo-btn.active,
|
|
33
|
+
.romo-btn:active {
|
|
34
|
+
background-image: none;
|
|
35
|
+
outline: 0;
|
|
36
|
+
@include box-shadow((inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)));
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.romo-btn.disabled,
|
|
40
|
+
.romo-btn[disabled] {
|
|
41
|
+
cursor: $notAllowedCursor;
|
|
42
|
+
background-image: none;
|
|
43
|
+
@include opacity(65);
|
|
44
|
+
@include box-shadow(none);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
a.romo-btn.romo-btn-small,
|
|
48
|
+
button.romo-btn.romo-btn.small,
|
|
49
|
+
.romo-btn.romo-btn-small,
|
|
50
|
+
a.romo-btn.romo-btn0,
|
|
51
|
+
button.romo-btn.romo-btn0,
|
|
52
|
+
.romo-btn.romo-btn0 { @include font-size0; @include font-weight0; @include button-height0; @include button-pad0; }
|
|
53
|
+
a.romo-btn,
|
|
54
|
+
button.romo-btn,
|
|
55
|
+
.romo-btn,
|
|
56
|
+
a.romo-btn.romo-btn1,
|
|
57
|
+
button.romo-btn.romo-btn1,
|
|
58
|
+
.romo-btn.romo-btn1 { @include font-size1; @include font-weight1; @include button-height1; @include button-pad1; }
|
|
59
|
+
a.romo-btn.romo-btn-large,
|
|
60
|
+
button.romo-btn.romo-btn-large,
|
|
61
|
+
.romo-btn.romo-btn-large,
|
|
62
|
+
a.romo-btn.romo-btn2,
|
|
63
|
+
button.romo-btn.romo-btn2,
|
|
64
|
+
.romo-btn.romo-btn2 { @include font-size2; @include font-weight2; @include button-height2; @include button-pad2; }
|
|
65
|
+
a.romo-btn.romo-btn3,
|
|
66
|
+
button.romo-btn.romo-btn3,
|
|
67
|
+
.romo-btn.romo-btn3 { @include font-size3; @include font-weight3; @include button-height3; @include button-pad3; }
|
|
68
|
+
|
|
69
|
+
.romo-btn-inline-small,
|
|
70
|
+
.romo-btn-inline0 { @include button-inline0; }
|
|
71
|
+
.romo-btn-inline,
|
|
72
|
+
.romo-btn-inline1 { @include button-inline1; }
|
|
73
|
+
.romo-btn-inline-large,
|
|
74
|
+
.romo-btn-inline2 { @include button-inline2; }
|
|
75
|
+
.romo-btn-inline3 { @include button-inline3; }
|
|
76
|
+
|
|
77
|
+
input[type="submit"].romo-btn-block,
|
|
78
|
+
input[type="reset"].romo-btn-block,
|
|
79
|
+
input[type="button"].romo-btn-block,
|
|
80
|
+
.romo-btn-block { display: block; width: 100%; }
|
|
81
|
+
|
|
82
|
+
a.romo-btn.romo-btn-alt,
|
|
83
|
+
button.romo-btn.romo-btn-alt,
|
|
84
|
+
.romo-btn.romo-btn-alt { @include button-bg($btnAltBackground, $btnAltBackgroundHighlight, $btnAltColor); }
|
|
85
|
+
a.romo-btn.romo-btn-primary,
|
|
86
|
+
button.romo-btn.romo-btn-primary,
|
|
87
|
+
.romo-btn.romo-btn-primary { @include button-bg($btnPrimaryBackground, $btnPrimaryBackgroundHighlight, $btnPrimaryColor); }
|
|
88
|
+
a.romo-btn.romo-btn-warning,
|
|
89
|
+
button.romo-btn.romo-btn-warning,
|
|
90
|
+
.romo-btn.romo-btn-warning { @include button-bg($btnWarningBackground, $btnWarningBackgroundHighlight, $btnWarningColor); }
|
|
91
|
+
a.romo-btn.romo-btn-error,
|
|
92
|
+
button.romo-btn.romo-btn-error,
|
|
93
|
+
.romo-btn.romo-btn-error,
|
|
94
|
+
a.romo-btn.romo-btn-danger,
|
|
95
|
+
button.romo-btn.romo-btn-danger,
|
|
96
|
+
.romo-btn.romo-btn-danger { @include button-bg($btnDangerBackground, $btnDangerBackgroundHighlight, $btnDangerColor); }
|
|
97
|
+
a.romo-btn.romo-btn-info,
|
|
98
|
+
button.romo-btn.romo-btn-info,
|
|
99
|
+
.romo-btn.romo-btn-info { @include button-bg($btnInfoBackground, $btnInfoBackgroundHighlight, $btnInfoColor); }
|
|
100
|
+
a.romo-btn.romo-btn-success,
|
|
101
|
+
button.romo-btn.romo-btn-success,
|
|
102
|
+
.romo-btn.romo-btn-success { @include button-bg($btnSuccessBackground, $btnSuccessBackgroundHighlight, $btnSuccessColor); }
|
|
103
|
+
a.romo-btn.romo-btn-inverse,
|
|
104
|
+
button.romo-btn.romo-btn-inverse,
|
|
105
|
+
.romo-btn.romo-btn-inverse { @include button-bg($btnInverseBackground, $btnInverseBackgroundHighlight, $btnInverseColor); }
|
|
106
|
+
|
|
107
|
+
a.romo-btn.romo-btn-link,
|
|
108
|
+
button.romo-btn.romo-btn-link,
|
|
109
|
+
.romo-btn.romo-btn-link,
|
|
110
|
+
a.romo-btn.romo-btn-link.active,
|
|
111
|
+
button.romo-btn.romo-btn-link.active,
|
|
112
|
+
.romo-btn.romo-btn-link.active,
|
|
113
|
+
a.romo-btn.romo-btn-link:active,
|
|
114
|
+
button.romo-btn.romo-btn-link:active,
|
|
115
|
+
.romo-btn.romo-btn-link:active,
|
|
116
|
+
a.romo-btn.romo-btn-link.disabled,
|
|
117
|
+
button.romo-btn.romo-btn-link.disabled,
|
|
118
|
+
.romo-btn.romo-btn-link.disabled,
|
|
119
|
+
a.romo-btn.romo-btn-link[disabled],
|
|
120
|
+
button.romo-btn.romo-btn-link[disabled],
|
|
121
|
+
.romo-btn.romo-btn-link[disabled] {
|
|
122
|
+
background-color: transparent;
|
|
123
|
+
background-image: none;
|
|
124
|
+
@include box-shadow(none);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
a.romo-btn.romo-btn-link,
|
|
128
|
+
button.romo-btn.romo-btn-link { color: $linkColor; }
|
|
129
|
+
a.romo-btn.romo-btn-link:hover,
|
|
130
|
+
button.romo-btn.romo-btn-link:hover,
|
|
131
|
+
a.romo-btn.romo-btn-link:focus,
|
|
132
|
+
button.romo-btn.romo-btn-link:focus {
|
|
133
|
+
color: $linkColorHover;
|
|
134
|
+
text-decoration: underline;
|
|
135
|
+
background-color: transparent;
|
|
136
|
+
}
|
|
137
|
+
a.romo-btn.romo-btn-link.disabled,
|
|
138
|
+
button.romo-btn.romo-btn-link.disabled,
|
|
139
|
+
.romo-btn.romo-btn-link.disabled,
|
|
140
|
+
a.romo-btn.romo-btn-link.disabled:hover,
|
|
141
|
+
button.romo-btn.romo-btn-link.disabled:hover,
|
|
142
|
+
.romo-btn.romo-btn-link.disabled:hover,
|
|
143
|
+
a.romo-btn.romo-btn-link.disabled:focus,
|
|
144
|
+
button.romo-btn.romo-btn-link.disabled:focus,
|
|
145
|
+
.romo-btn.romo-btn-link.disabled:focus,
|
|
146
|
+
a.romo-btn.romo-btn-link[disabled],
|
|
147
|
+
button.romo-btn.romo-btn-link[disabled],
|
|
148
|
+
.romo-btn.romo-btn-link[disabled],
|
|
149
|
+
a.romo-btn.romo-btn-link[disabled]:hover,
|
|
150
|
+
button.romo-btn.romo-btn-link[disabled]:hover,
|
|
151
|
+
.romo-btn.romo-btn-link[disabled]:hover,
|
|
152
|
+
a.romo-btn.romo-btn-link[disabled]:focus,
|
|
153
|
+
button.romo-btn.romo-btn-link[disabled]:focus,
|
|
154
|
+
.romo-btn.romo-btn-link[disabled]:focus { color: $disabledColor; }
|
|
155
|
+
|
|
156
|
+
.romo-btn-group { @include display-inline-flex(!important); }
|
|
157
|
+
.romo-btn-group > * { display: inherit; }
|
|
158
|
+
|
|
159
|
+
.romo-btn-group .romo-btn:not(:last-child) { @include rm-border-right; }
|
|
160
|
+
|
|
161
|
+
.romo-btn-group.romo-btn-group-border-radius .romo-btn:first-child,
|
|
162
|
+
.romo-btn-group.romo-btn-group-border1-radius .romo-btn:first-child { @include border1-top-left-radius; @include border1-bottom-left-radius; }
|
|
163
|
+
.romo-btn-group.romo-btn-group-border0-radius .romo-btn:first-child { @include border0-top-left-radius; @include border0-bottom-left-radius; }
|
|
164
|
+
.romo-btn-group.romo-btn-group-border2-radius .romo-btn:first-child { @include border2-top-left-radius; @include border2-bottom-left-radius; }
|
|
165
|
+
|
|
166
|
+
.romo-btn-group.romo-btn-group-border-radius .romo-btn:last-child,
|
|
167
|
+
.romo-btn-group.romo-btn-group-border1-radius .romo-btn:last-child { @include border1-top-right-radius; @include border1-bottom-right-radius; }
|
|
168
|
+
.romo-btn-group.romo-btn-group-border0-radius .romo-btn:last-child { @include border0-top-right-radius; @include border0-bottom-right-radius; }
|
|
169
|
+
.romo-btn-group.romo-btn-group-border2-radius .romo-btn:last-child { @include border2-top-right-radius; @include border2-bottom-right-radius; }
|
|
170
|
+
|
|
171
|
+
.romo-btn-group-vertical { display: inline-block; }
|
|
172
|
+
.romo-btn-group-vertical .romo-btn { display: block; max-width: 100%; }
|
|
173
|
+
.romo-btn-group-vertical .romo-btn:not(:last-child) { @include rm-border-bottom; }
|
|
174
|
+
|
|
175
|
+
.romo-btn-group-vertical.romo-btn-group-border-radius .romo-btn:first-child,
|
|
176
|
+
.romo-btn-group-vertical.romo-btn-group-border1-radius .romo-btn:first-child { @include border1-top-left-radius; @include border1-top-right-radius; }
|
|
177
|
+
.romo-btn-group-vertical.romo-btn-group-border0-radius .romo-btn:first-child { @include border0-top-left-radius; @include border0-top-right-radius; }
|
|
178
|
+
.romo-btn-group-vertical.romo-btn-group-border2-radius .romo-btn:first-child { @include border2-top-left-radius; @include border2-top-right-radius; }
|
|
179
|
+
|
|
180
|
+
.romo-btn-group-vertical.romo-btn-group-border-radius .romo-btn:last-child,
|
|
181
|
+
.romo-btn-group-vertical.romo-btn-group-border1-radius .romo-btn:last-child { @include border1-bottom-left-radius; @include border1-bottom-right-radius; }
|
|
182
|
+
.romo-btn-group-vertical.romo-btn-group-border0-radius .romo-btn:last-child { @include border0-bottom-left-radius; @include border0-bottom-right-radius; }
|
|
183
|
+
.romo-btn-group-vertical.romo-btn-group-border2-radius .romo-btn:last-child { @include border2-bottom-left-radius; @include border2-bottom-right-radius; }
|
|
184
|
+
|
|
185
|
+
.romo-btn-group .romo-btn-group-vertical:not(:last-child) .romo-btn { @include rm-border-right; }
|
|
186
|
+
.romo-btn-group .romo-btn-group-vertical:last-child .romo-btn { @include border1-right; }
|
|
187
|
+
|
|
188
|
+
.romo-btn-group.romo-btn-group-border-radius .romo-btn-group-vertical .romo-btn,
|
|
189
|
+
.romo-btn-group.romo-btn-group-border1-radius .romo-btn-group-vertical .romo-btn { @include rm-border-radius; }
|
|
190
|
+
.romo-btn-group.romo-btn-group-border0-radius .romo-btn-group-vertical .romo-btn { @include rm-border-radius; }
|
|
191
|
+
.romo-btn-group.romo-btn-group-border2-radius .romo-btn-group-vertical .romo-btn { @include rm-border-radius; }
|
|
192
|
+
|
|
193
|
+
.romo-btn-group.romo-btn-group-border-radius .romo-btn-group-vertical:first-child .romo-btn:first-child,
|
|
194
|
+
.romo-btn-group.romo-btn-group-border1-radius .romo-btn-group-vertical:first-child .romo-btn:first-child { @include border1-top-left-radius; }
|
|
195
|
+
.romo-btn-group.romo-btn-group-border0-radius .romo-btn-group-vertical:first-child .romo-btn:first-child { @include border0-top-left-radius; }
|
|
196
|
+
.romo-btn-group.romo-btn-group-border2-radius .romo-btn-group-vertical:first-child .romo-btn:first-child { @include border2-top-left-radius; }
|
|
197
|
+
|
|
198
|
+
.romo-btn-group.romo-btn-group-border-radius .romo-btn-group-vertical:first-child .romo-btn:last-child,
|
|
199
|
+
.romo-btn-group.romo-btn-group-border1-radius .romo-btn-group-vertical:first-child .romo-btn:last-child { @include border1-bottom-left-radius; }
|
|
200
|
+
.romo-btn-group.romo-btn-group-border0-radius .romo-btn-group-vertical:first-child .romo-btn:last-child { @include border0-bottom-left-radius; }
|
|
201
|
+
.romo-btn-group.romo-btn-group-border2-radius .romo-btn-group-vertical:first-child .romo-btn:last-child { @include border2-bottom-left-radius; }
|
|
202
|
+
|
|
203
|
+
.romo-btn-group.romo-btn-group-border-radius .romo-btn-group-vertical:last-child .romo-btn:first-child,
|
|
204
|
+
.romo-btn-group.romo-btn-group-border1-radius .romo-btn-group-vertical:last-child .romo-btn:first-child { @include border1-top-right-radius; }
|
|
205
|
+
.romo-btn-group.romo-btn-group-border0-radius .romo-btn-group-vertical:last-child .romo-btn:first-child { @include border0-top-right-radius; }
|
|
206
|
+
.romo-btn-group.romo-btn-group-border2-radius .romo-btn-group-vertical:last-child .romo-btn:first-child { @include border2-top-right-radius; }
|
|
207
|
+
|
|
208
|
+
.romo-btn-group.romo-btn-group-border-radius .romo-btn-group-vertical:last-child .romo-btn:last-child,
|
|
209
|
+
.romo-btn-group.romo-btn-group-border1-radius .romo-btn-group-vertical:last-child .romo-btn:last-child { @include border1-bottom-right-radius; }
|
|
210
|
+
.romo-btn-group.romo-btn-group-border0-radius .romo-btn-group-vertical:last-child .romo-btn:last-child { @include border0-bottom-right-radius; }
|
|
211
|
+
.romo-btn-group.romo-btn-group-border2-radius .romo-btn-group-vertical:last-child .romo-btn:last-child { @include border2-bottom-right-radius; }
|