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.
Files changed (46) hide show
  1. data/.gitignore +2 -0
  2. data/Gemfile +9 -1
  3. data/README.md +1 -1
  4. data/assets/css/romo/_mixins.scss +486 -0
  5. data/assets/css/romo/_vars.scss +159 -0
  6. data/assets/css/romo/base.scss +454 -0
  7. data/assets/css/romo/buttons.scss +211 -0
  8. data/assets/css/romo/datepicker.scss +73 -0
  9. data/assets/css/romo/dropdown.scss +33 -0
  10. data/assets/css/romo/forms.scss +193 -0
  11. data/assets/css/romo/grid.scss +271 -0
  12. data/assets/css/romo/grid_table.scss +129 -0
  13. data/assets/css/romo/labels.scss +41 -0
  14. data/assets/css/romo/lists.scss +37 -0
  15. data/assets/css/romo/modal.scss +32 -0
  16. data/assets/css/romo/normalize.scss +425 -0
  17. data/assets/css/romo/select.scss +89 -0
  18. data/assets/css/romo/sortable.scss +14 -0
  19. data/assets/css/romo/table.scss +99 -0
  20. data/assets/css/romo/tabs.scss +71 -0
  21. data/assets/css/romo/tooltip.scss +89 -0
  22. data/assets/css/romo/z_index.scss +26 -0
  23. data/assets/js/romo/base.js +177 -0
  24. data/assets/js/romo/datepicker.js +541 -0
  25. data/assets/js/romo/dropdown.js +309 -0
  26. data/assets/js/romo/dropdown_form.js +92 -0
  27. data/assets/js/romo/form.js +182 -0
  28. data/assets/js/romo/indicator.js +88 -0
  29. data/assets/js/romo/inline.js +77 -0
  30. data/assets/js/romo/inline_form.js +86 -0
  31. data/assets/js/romo/invoke.js +87 -0
  32. data/assets/js/romo/modal.js +311 -0
  33. data/assets/js/romo/modal_form.js +101 -0
  34. data/assets/js/romo/select.js +139 -0
  35. data/assets/js/romo/select_dropdown.js +325 -0
  36. data/assets/js/romo/sortable.js +201 -0
  37. data/assets/js/romo/tooltip.js +258 -0
  38. data/lib/romo/dassets.rb +64 -0
  39. data/lib/romo/version.rb +1 -1
  40. data/lib/romo.rb +9 -0
  41. data/romo.gemspec +4 -2
  42. data/test/support/.gitkeep +0 -0
  43. data/test/system/.gitkeep +0 -0
  44. data/test/unit/dassets_tests.rb +67 -0
  45. data/test/unit/romo_tests.rb +21 -0
  46. metadata +53 -10
@@ -0,0 +1,73 @@
1
+ @import 'css/romo/vars';
2
+ @import 'css/romo/mixins';
3
+
4
+ .romo-datepicker-wrapper {
5
+ position: relative;
6
+ }
7
+
8
+ .romo-datepicker-indicator {
9
+ position: absolute;
10
+ right: 6px;
11
+ vertical-align: middle;
12
+ cursor: pointer;
13
+ }
14
+ .romo-datepicker-indicator.disabled {
15
+ cursor: $notAllowedCursor;
16
+ color: $disabledColor;
17
+ }
18
+
19
+ .romo-datepicker-calendar {
20
+ padding: $spacingSize0;
21
+ @include user-select(none);
22
+
23
+ background-color: $inputBackground;
24
+ color: $inputColor;
25
+ }
26
+
27
+ .romo-datepicker-calendar table {
28
+ background-color: transparent;
29
+ border-collapse: collapse;
30
+ border-spacing: 0;
31
+ width: 100%;
32
+ }
33
+
34
+ .romo-datepicker-calendar th,
35
+ .romo-datepicker-calendar td {
36
+ width: 14.285714286%; /* 100% / 7 */
37
+ text-align: center;
38
+ }
39
+
40
+ .romo-datepicker-calendar .romo-datepicker-prev,
41
+ .romo-datepicker-calendar .romo-datepicker-next,
42
+ .romo-datepicker-calendar TD.romo-datepicker-day:not(.disabled) {
43
+ cursor: pointer;
44
+ }
45
+
46
+ .romo-datepicker-calendar TD.romo-datepicker-day-weekend {
47
+ background: $inputAltBackground;
48
+ }
49
+
50
+ .romo-datepicker-calendar .romo-datepicker-prev:hover,
51
+ .romo-datepicker-calendar .romo-datepicker-next:hover,
52
+ .romo-datepicker-calendar TD.romo-datepicker-day.romo-datepicker-highlight:not(.disabled) {
53
+ background: darken($inputAltBackground, 10%);
54
+ }
55
+
56
+ .romo-datepicker-calendar TD.romo-datepicker-day.disabled {
57
+ cursor: $notAllowedCursor;
58
+ color: $disabledColor;
59
+ }
60
+
61
+ .romo-datepicker-calendar TD.romo-datepicker-day-other {
62
+ color: darken($inputDisabledColor, 20%);;
63
+ }
64
+
65
+ .romo-datepicker-calendar TD.romo-datepicker-day-today {
66
+ border: 1px solid $inputColor;
67
+ }
68
+
69
+ .romo-datepicker-calendar TD.romo-datepicker-day.selected,
70
+ .romo-datepicker-calendar TD.romo-datepicker-day.selected.romo-datepicker-highlight {
71
+ background-color: $inputHighlightBackround;
72
+ color: $inputBackground;
73
+ }
@@ -0,0 +1,33 @@
1
+ @import 'css/romo/vars';
2
+ @import 'css/romo/mixins';
3
+
4
+ .romo-dropdown,
5
+ [data-romo-dropdown-close="true"] {
6
+ cursor: pointer;
7
+ }
8
+
9
+ .romo-dropdown-popup {
10
+ position: absolute;
11
+ float: left;
12
+ @include border0;
13
+
14
+ background-color: $baseBackground;
15
+ border-color: $baseBorderColor;
16
+ border-color: rgba(0, 0, 0, 0.2);
17
+ }
18
+
19
+ .romo-dropdown-popup[data-romo-dropdown-fixed="true"] {
20
+ position: fixed;
21
+ }
22
+
23
+ .romo-dropdown-popup[data-romo-dropdown-position="bottom"] {
24
+ @include box-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
25
+ }
26
+
27
+ .romo-dropdown-popup[data-romo-dropdown-position="top"] {
28
+ @include box-shadow(0 -3px 10px rgba(0, 0, 0, 0.2));
29
+ }
30
+
31
+ .romo-dropdown-popup:not([class*="romo-dropdown-open"]) {
32
+ display: none;
33
+ }
@@ -0,0 +1,193 @@
1
+ @import 'css/romo/vars';
2
+ @import 'css/romo/mixins';
3
+
4
+ /* defaults */
5
+
6
+ form { @include rm-push; @include rm-pad; }
7
+ label { display: block; }
8
+
9
+ /* basic */
10
+
11
+ .romo-form fieldset {
12
+ @include rm-push;
13
+ @include rm-pad;
14
+ @include rm-border;
15
+ }
16
+
17
+ .romo-form legend {
18
+ display: block;
19
+ width: 100%;
20
+ @include rm-push;
21
+ @include rm-pad;
22
+ @include push0-bottom;
23
+ @include rm-border;
24
+ @include border1-bottom;
25
+ }
26
+
27
+ .romo-form input,
28
+ .romo-form select,
29
+ .romo-form textarea {
30
+ font-size: 100%;
31
+ @include rm-push;
32
+ @include align-middle;
33
+ }
34
+
35
+ .romo-form label.romo-radio,
36
+ .romo-form label.romo-checkbox {
37
+ span,
38
+ input[type="radio"],
39
+ input[type="checkbox"] {
40
+ line-height: 1;
41
+ @include align-middle;
42
+ }
43
+ }
44
+
45
+ .romo-form input { *overflow: visible; line-height: normal; }
46
+ .romo-form textarea { overflow: auto; @include align-top; }
47
+
48
+ .romo-form label,
49
+ .romo-form select,
50
+ .romo-form input[type="button"],
51
+ .romo-form input[type="reset"],
52
+ .romo-form input[type="submit"],
53
+ .romo-form input[type="radio"],
54
+ .romo-form input[type="checkbox"] { cursor: pointer; }
55
+
56
+ .romo-form input[disabled],
57
+ .romo-form select[disabled],
58
+ .romo-form textarea[disabled],
59
+ .romo-form input[readonly],
60
+ .romo-form select[readonly],
61
+ .romo-form textarea[readonly] { cursor: $notAllowedCursor; }
62
+
63
+ .romo-form select {
64
+ font-weight: normal;
65
+ background-color: $inputBackground;
66
+ @include border1;
67
+ }
68
+ .romo-form select optgroup { @include select-optgroup; }
69
+ .romo-form select option { @include select-option; }
70
+
71
+ .romo-form textarea,
72
+ .romo-form input[type="text"],
73
+ .romo-form input[type="password"],
74
+ .romo-form input[type="datetime"],
75
+ .romo-form input[type="datetime-local"],
76
+ .romo-form input[type="date"],
77
+ .romo-form input[type="month"],
78
+ .romo-form input[type="time"],
79
+ .romo-form input[type="week"],
80
+ .romo-form input[type="number"],
81
+ .romo-form input[type="email"],
82
+ .romo-form input[type="url"],
83
+ .romo-form input[type="search"],
84
+ .romo-form input[type="tel"],
85
+ .romo-form input[type="color"] {
86
+ font-weight: normal;
87
+ background-color: $inputBackground;
88
+ @include border1;
89
+ @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
90
+ }
91
+
92
+ .romo-form select:focus,
93
+ .romo-form textarea:focus,
94
+ .romo-form input[type="text"]:focus,
95
+ .romo-form input[type="password"]:focus,
96
+ .romo-form input[type="datetime"]:focus,
97
+ .romo-form input[type="datetime-local"]:focus,
98
+ .romo-form input[type="date"]:focus,
99
+ .romo-form input[type="month"]:focus,
100
+ .romo-form input[type="time"]:focus,
101
+ .romo-form input[type="week"]:focus,
102
+ .romo-form input[type="number"]:focus,
103
+ .romo-form input[type="email"]:focus,
104
+ .romo-form input[type="url"]:focus,
105
+ .romo-form input[type="search"]:focus,
106
+ .romo-form input[type="tel"]:focus,
107
+ .romo-form input[type="color"]:focus {
108
+ @include input-focus;
109
+ }
110
+
111
+ .romo-form input[disabled],
112
+ .romo-form select[disabled],
113
+ .romo-form textarea[disabled],
114
+ .romo-form input[readonly],
115
+ .romo-form select[readonly],
116
+ .romo-form textarea[readonly] { background-color: $inputDisabledColor; }
117
+
118
+ .romo-form input[type="radio"][disabled],
119
+ .romo-form input[type="checkbox"][disabled],
120
+ .romo-form input[type="radio"][readonly],
121
+ .romo-form input[type="checkbox"][readonly] { background-color: transparent };
122
+
123
+ .romo-form select,
124
+ .romo-form input[type="text"],
125
+ .romo-form input[type="password"],
126
+ .romo-form input[type="datetime"],
127
+ .romo-form input[type="datetime-local"],
128
+ .romo-form input[type="date"],
129
+ .romo-form input[type="month"],
130
+ .romo-form input[type="time"],
131
+ .romo-form input[type="week"],
132
+ .romo-form input[type="number"],
133
+ .romo-form input[type="email"],
134
+ .romo-form input[type="url"],
135
+ .romo-form input[type="search"],
136
+ .romo-form input[type="tel"],
137
+ .romo-form input[type="color"] {
138
+ height: $inputHeight;
139
+ line-height: $baseLineHeight;
140
+ @include align-middle;
141
+ }
142
+
143
+ .romo-form textarea,
144
+ .romo-form input[type="text"],
145
+ .romo-form input[type="password"],
146
+ .romo-form input[type="datetime"],
147
+ .romo-form input[type="datetime-local"],
148
+ .romo-form input[type="date"],
149
+ .romo-form input[type="month"],
150
+ .romo-form input[type="time"],
151
+ .romo-form input[type="week"],
152
+ .romo-form input[type="number"],
153
+ .romo-form input[type="email"],
154
+ .romo-form input[type="url"],
155
+ .romo-form input[type="search"],
156
+ .romo-form input[type="tel"],
157
+ .romo-form input[type="color"] {
158
+ display: inline-block;
159
+ padding: 4px 6px;
160
+ color: $inputColor;
161
+ }
162
+
163
+ .romo-form textarea,
164
+ .romo-form select[multiple],
165
+ .romo-form select[size] { height: auto; }
166
+
167
+ .romo-form input[type="file"] {
168
+ height: ($baseLineHeight / 2) * 3; /* 30px */
169
+ line-height: ($baseLineHeight / 2) * 3; /* 30px */
170
+ }
171
+
172
+ .romo-input,
173
+ .romo-input1 { width: $inputSize1; }
174
+ .romo-input-small,
175
+ .romo-input0 { width: $inputSize0; }
176
+ .romo-input-large,
177
+ .romo-input2 { width: $inputSize2; }
178
+
179
+ .romo-input-block { width: 100%; display: block; }
180
+
181
+ .romo-form input[type="file"],
182
+ .romo-form input[type="image"],
183
+ .romo-form input[type="submit"],
184
+ .romo-form input[type="reset"],
185
+ .romo-form input[type="button"],
186
+ .romo-form input[type="radio"],
187
+ .romo-form input[type="checkbox"] { width: auto; }
188
+
189
+ .romo-form .romo-input-inline,
190
+ .romo-form .romo-input-help {
191
+ line-height: $inputHeight;
192
+ @include align-middle;
193
+ }
@@ -0,0 +1,271 @@
1
+ @import 'css/romo/vars';
2
+ @import 'css/romo/mixins';
3
+
4
+ .romo-row {
5
+ @include display-flex;
6
+ @include flex-direction(row);
7
+ @include flex-wrap(nowrap);
8
+ @include flex-justify-content(center);
9
+ @include flex-align-items(flex-start);
10
+ }
11
+
12
+ .romo-span { min-height: 1px; }
13
+
14
+ .romo-row-pull-left { @include flex-justify-content(flex-start); }
15
+ .romo-row-pull-right { @include flex-justify-content(flex-end); }
16
+ .romo-row-push-between { @include flex-justify-content(space-between); }
17
+ .romo-row-push-around { @include flex-justify-content(space-around); }
18
+
19
+ .romo-row-align-top { @include flex-align-items(flex-start); }
20
+ .romo-row-align-middle { @include flex-align-items(center); }
21
+ .romo-row-align-bottom { @include flex-align-items(flex-end); }
22
+ .romo-row-align-stretch { @include flex-align-items(stretch); }
23
+
24
+ .romo-span-fill {
25
+ @include flex-grow(1);
26
+ @include flex-shrink(1);
27
+ }
28
+
29
+ .romo-span-align-top { @include flex-align-self(flex-start); }
30
+ .romo-span-align-middle { @include flex-align-self(center); }
31
+ .romo-span-align-bottom { @include flex-align-self(flex-end); }
32
+ .romo-span-align-stretch { @include flex-align-self(stretch); }
33
+
34
+ /* float mode (for browsers that don't support Flexbox */
35
+
36
+ .romo-row-float { @include clearfix; }
37
+ .romo-row-float > .romo-span { float: left; }
38
+
39
+ /* widths */
40
+
41
+ .romo-1-1 { @include grid-span(1, 1); }
42
+
43
+ .romo-1-2 { @include grid-span(1, 2); }
44
+ .romo-2-2 { @include grid-span(2, 2); }
45
+
46
+ .romo-1-3 { @include grid-span(1, 3); }
47
+ .romo-2-3 { @include grid-span(2, 3); }
48
+ .romo-3-3 { @include grid-span(3, 3); }
49
+
50
+ .romo-1-4 { @include grid-span(1, 4); }
51
+ .romo-2-4 { @include grid-span(2, 4); }
52
+ .romo-3-4 { @include grid-span(3, 4); }
53
+ .romo-4-4 { @include grid-span(4, 4); }
54
+
55
+ .romo-1-5 { @include grid-span(1, 5); }
56
+ .romo-2-5 { @include grid-span(2, 5); }
57
+ .romo-3-5 { @include grid-span(3, 5); }
58
+ .romo-4-5 { @include grid-span(4, 5); }
59
+ .romo-5-5 { @include grid-span(5, 5); }
60
+
61
+ .romo-1-6 { @include grid-span(1, 6); }
62
+ .romo-2-6 { @include grid-span(2, 6); }
63
+ .romo-3-6 { @include grid-span(3, 6); }
64
+ .romo-4-6 { @include grid-span(4, 6); }
65
+ .romo-5-6 { @include grid-span(5, 6); }
66
+ .romo-6-6 { @include grid-span(6, 6); }
67
+
68
+ .romo-1-7 { @include grid-span(1, 7); }
69
+ .romo-2-7 { @include grid-span(2, 7); }
70
+ .romo-3-7 { @include grid-span(3, 7); }
71
+ .romo-4-7 { @include grid-span(4, 7); }
72
+ .romo-5-7 { @include grid-span(5, 7); }
73
+ .romo-6-7 { @include grid-span(6, 7); }
74
+ .romo-7-7 { @include grid-span(7, 7); }
75
+
76
+ .romo-1-8 { @include grid-span(1, 8); }
77
+ .romo-2-8 { @include grid-span(2, 8); }
78
+ .romo-3-8 { @include grid-span(3, 8); }
79
+ .romo-4-8 { @include grid-span(4, 8); }
80
+ .romo-5-8 { @include grid-span(5, 8); }
81
+ .romo-6-8 { @include grid-span(6, 8); }
82
+ .romo-7-8 { @include grid-span(7, 8); }
83
+ .romo-8-8 { @include grid-span(8, 8); }
84
+
85
+ .romo-1-9 { @include grid-span(1, 9); }
86
+ .romo-2-9 { @include grid-span(2, 9); }
87
+ .romo-3-9 { @include grid-span(3, 9); }
88
+ .romo-4-9 { @include grid-span(4, 9); }
89
+ .romo-5-9 { @include grid-span(5, 9); }
90
+ .romo-6-9 { @include grid-span(6, 9); }
91
+ .romo-7-9 { @include grid-span(7, 9); }
92
+ .romo-8-9 { @include grid-span(8, 9); }
93
+ .romo-9-9 { @include grid-span(9, 9); }
94
+
95
+ .romo-1-10 { @include grid-span(1, 10); }
96
+ .romo-2-10 { @include grid-span(2, 10); }
97
+ .romo-3-10 { @include grid-span(3, 10); }
98
+ .romo-4-10 { @include grid-span(4, 10); }
99
+ .romo-5-10 { @include grid-span(5, 10); }
100
+ .romo-6-10 { @include grid-span(6, 10); }
101
+ .romo-7-10 { @include grid-span(7, 10); }
102
+ .romo-8-10 { @include grid-span(8, 10); }
103
+ .romo-9-10 { @include grid-span(9, 10); }
104
+ .romo-10-10 { @include grid-span(10, 10); }
105
+
106
+ .romo-1-11 { @include grid-span(1, 11); }
107
+ .romo-2-11 { @include grid-span(2, 11); }
108
+ .romo-3-11 { @include grid-span(3, 11); }
109
+ .romo-4-11 { @include grid-span(4, 11); }
110
+ .romo-5-11 { @include grid-span(5, 11); }
111
+ .romo-6-11 { @include grid-span(6, 11); }
112
+ .romo-7-11 { @include grid-span(7, 11); }
113
+ .romo-8-11 { @include grid-span(8, 11); }
114
+ .romo-9-11 { @include grid-span(9, 11); }
115
+ .romo-10-11 { @include grid-span(10, 11); }
116
+ .romo-11-11 { @include grid-span(11, 11); }
117
+
118
+ .romo-1-12 { @include grid-span(1, 12); }
119
+ .romo-2-12 { @include grid-span(2, 12); }
120
+ .romo-3-12 { @include grid-span(3, 12); }
121
+ .romo-4-12 { @include grid-span(4, 12); }
122
+ .romo-5-12 { @include grid-span(5, 12); }
123
+ .romo-6-12 { @include grid-span(6, 12); }
124
+ .romo-7-12 { @include grid-span(7, 12); }
125
+ .romo-8-12 { @include grid-span(8, 12); }
126
+ .romo-9-12 { @include grid-span(9, 12); }
127
+ .romo-10-12 { @include grid-span(10, 12); }
128
+ .romo-11-12 { @include grid-span(11, 12); }
129
+ .romo-12-12 { @include grid-span(12, 12); }
130
+
131
+ .romo-1-24 { @include grid-span(1, 24); }
132
+ .romo-2-24 { @include grid-span(2, 24); }
133
+ .romo-3-24 { @include grid-span(3, 24); }
134
+ .romo-4-24 { @include grid-span(4, 24); }
135
+ .romo-5-24 { @include grid-span(5, 24); }
136
+ .romo-6-24 { @include grid-span(6, 24); }
137
+ .romo-7-24 { @include grid-span(7, 24); }
138
+ .romo-8-24 { @include grid-span(8, 24); }
139
+ .romo-9-24 { @include grid-span(9, 24); }
140
+ .romo-10-24 { @include grid-span(10, 24); }
141
+ .romo-11-24 { @include grid-span(11, 24); }
142
+ .romo-12-24 { @include grid-span(12, 24); }
143
+ .romo-13-24 { @include grid-span(13, 24); }
144
+ .romo-14-24 { @include grid-span(14, 24); }
145
+ .romo-15-24 { @include grid-span(15, 24); }
146
+ .romo-16-24 { @include grid-span(16, 24); }
147
+ .romo-17-24 { @include grid-span(17, 24); }
148
+ .romo-18-24 { @include grid-span(18, 24); }
149
+ .romo-19-24 { @include grid-span(19, 24); }
150
+ .romo-20-24 { @include grid-span(20, 24); }
151
+ .romo-21-24 { @include grid-span(21, 24); }
152
+ .romo-22-24 { @include grid-span(22, 24); }
153
+ .romo-23-24 { @include grid-span(23, 24); }
154
+ .romo-24-24 { @include grid-span(24, 24); }
155
+
156
+ /* offsets */
157
+
158
+ .romo-offset-1-1 { @include grid-offset(1, 1); }
159
+
160
+ .romo-offset-1-2 { @include grid-offset(1, 2); }
161
+ .romo-offset-2-2 { @include grid-offset(2, 2); }
162
+
163
+ .romo-offset-1-3 { @include grid-offset(1, 3); }
164
+ .romo-offset-2-3 { @include grid-offset(2, 3); }
165
+ .romo-offset-3-3 { @include grid-offset(3, 3); }
166
+
167
+ .romo-offset-1-4 { @include grid-offset(1, 4); }
168
+ .romo-offset-2-4 { @include grid-offset(2, 4); }
169
+ .romo-offset-3-4 { @include grid-offset(3, 4); }
170
+ .romo-offset-4-4 { @include grid-offset(4, 4); }
171
+
172
+ .romo-offset-1-5 { @include grid-offset(1, 5); }
173
+ .romo-offset-2-5 { @include grid-offset(2, 5); }
174
+ .romo-offset-3-5 { @include grid-offset(3, 5); }
175
+ .romo-offset-4-5 { @include grid-offset(4, 5); }
176
+ .romo-offset-5-5 { @include grid-offset(5, 5); }
177
+
178
+ .romo-offset-1-6 { @include grid-offset(1, 6); }
179
+ .romo-offset-2-6 { @include grid-offset(2, 6); }
180
+ .romo-offset-3-6 { @include grid-offset(3, 6); }
181
+ .romo-offset-4-6 { @include grid-offset(4, 6); }
182
+ .romo-offset-5-6 { @include grid-offset(5, 6); }
183
+ .romo-offset-6-6 { @include grid-offset(6, 6); }
184
+
185
+ .romo-offset-1-7 { @include grid-offset(1, 7); }
186
+ .romo-offset-2-7 { @include grid-offset(2, 7); }
187
+ .romo-offset-3-7 { @include grid-offset(3, 7); }
188
+ .romo-offset-4-7 { @include grid-offset(4, 7); }
189
+ .romo-offset-5-7 { @include grid-offset(5, 7); }
190
+ .romo-offset-6-7 { @include grid-offset(6, 7); }
191
+ .romo-offset-7-7 { @include grid-offset(7, 7); }
192
+
193
+ .romo-offset-1-8 { @include grid-offset(1, 8); }
194
+ .romo-offset-2-8 { @include grid-offset(2, 8); }
195
+ .romo-offset-3-8 { @include grid-offset(3, 8); }
196
+ .romo-offset-4-8 { @include grid-offset(4, 8); }
197
+ .romo-offset-5-8 { @include grid-offset(5, 8); }
198
+ .romo-offset-6-8 { @include grid-offset(6, 8); }
199
+ .romo-offset-7-8 { @include grid-offset(7, 8); }
200
+ .romo-offset-8-8 { @include grid-offset(8, 8); }
201
+
202
+ .romo-offset-1-9 { @include grid-offset(1, 9); }
203
+ .romo-offset-2-9 { @include grid-offset(2, 9); }
204
+ .romo-offset-3-9 { @include grid-offset(3, 9); }
205
+ .romo-offset-4-9 { @include grid-offset(4, 9); }
206
+ .romo-offset-5-9 { @include grid-offset(5, 9); }
207
+ .romo-offset-6-9 { @include grid-offset(6, 9); }
208
+ .romo-offset-7-9 { @include grid-offset(7, 9); }
209
+ .romo-offset-8-9 { @include grid-offset(8, 9); }
210
+ .romo-offset-9-9 { @include grid-offset(9, 9); }
211
+
212
+ .romo-offset-1-10 { @include grid-offset(1, 10); }
213
+ .romo-offset-2-10 { @include grid-offset(2, 10); }
214
+ .romo-offset-3-10 { @include grid-offset(3, 10); }
215
+ .romo-offset-4-10 { @include grid-offset(4, 10); }
216
+ .romo-offset-5-10 { @include grid-offset(5, 10); }
217
+ .romo-offset-6-10 { @include grid-offset(6, 10); }
218
+ .romo-offset-7-10 { @include grid-offset(7, 10); }
219
+ .romo-offset-8-10 { @include grid-offset(8, 10); }
220
+ .romo-offset-9-10 { @include grid-offset(9, 10); }
221
+ .romo-offset-10-10 { @include grid-offset(10, 10); }
222
+
223
+ .romo-offset-1-11 { @include grid-offset(1, 11); }
224
+ .romo-offset-2-11 { @include grid-offset(2, 11); }
225
+ .romo-offset-3-11 { @include grid-offset(3, 11); }
226
+ .romo-offset-4-11 { @include grid-offset(4, 11); }
227
+ .romo-offset-5-11 { @include grid-offset(5, 11); }
228
+ .romo-offset-6-11 { @include grid-offset(6, 11); }
229
+ .romo-offset-7-11 { @include grid-offset(7, 11); }
230
+ .romo-offset-8-11 { @include grid-offset(8, 11); }
231
+ .romo-offset-9-11 { @include grid-offset(9, 11); }
232
+ .romo-offset-10-11 { @include grid-offset(10, 11); }
233
+ .romo-offset-11-11 { @include grid-offset(11, 11); }
234
+
235
+ .romo-offset-1-12 { @include grid-offset(1, 12); }
236
+ .romo-offset-2-12 { @include grid-offset(2, 12); }
237
+ .romo-offset-3-12 { @include grid-offset(3, 12); }
238
+ .romo-offset-4-12 { @include grid-offset(4, 12); }
239
+ .romo-offset-5-12 { @include grid-offset(5, 12); }
240
+ .romo-offset-6-12 { @include grid-offset(6, 12); }
241
+ .romo-offset-7-12 { @include grid-offset(7, 12); }
242
+ .romo-offset-8-12 { @include grid-offset(8, 12); }
243
+ .romo-offset-9-12 { @include grid-offset(9, 12); }
244
+ .romo-offset-10-12 { @include grid-offset(10, 12); }
245
+ .romo-offset-11-12 { @include grid-offset(11, 12); }
246
+ .romo-offset-12-12 { @include grid-offset(12, 12); }
247
+
248
+ .romo-offset-1-24 { @include grid-offset(1, 24); }
249
+ .romo-offset-2-24 { @include grid-offset(2, 24); }
250
+ .romo-offset-3-24 { @include grid-offset(3, 24); }
251
+ .romo-offset-4-24 { @include grid-offset(4, 24); }
252
+ .romo-offset-5-24 { @include grid-offset(5, 24); }
253
+ .romo-offset-6-24 { @include grid-offset(6, 24); }
254
+ .romo-offset-7-24 { @include grid-offset(7, 24); }
255
+ .romo-offset-8-24 { @include grid-offset(8, 24); }
256
+ .romo-offset-9-24 { @include grid-offset(9, 24); }
257
+ .romo-offset-10-24 { @include grid-offset(10, 24); }
258
+ .romo-offset-11-24 { @include grid-offset(11, 24); }
259
+ .romo-offset-12-24 { @include grid-offset(12, 24); }
260
+ .romo-offset-13-24 { @include grid-offset(13, 24); }
261
+ .romo-offset-14-24 { @include grid-offset(14, 24); }
262
+ .romo-offset-15-24 { @include grid-offset(15, 24); }
263
+ .romo-offset-16-24 { @include grid-offset(16, 24); }
264
+ .romo-offset-17-24 { @include grid-offset(17, 24); }
265
+ .romo-offset-18-24 { @include grid-offset(18, 24); }
266
+ .romo-offset-19-24 { @include grid-offset(19, 24); }
267
+ .romo-offset-20-24 { @include grid-offset(20, 24); }
268
+ .romo-offset-21-24 { @include grid-offset(21, 24); }
269
+ .romo-offset-22-24 { @include grid-offset(22, 24); }
270
+ .romo-offset-23-24 { @include grid-offset(23, 24); }
271
+ .romo-offset-24-24 { @include grid-offset(24, 24); }