romo 0.18.2 → 0.19.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 (23) hide show
  1. checksums.yaml +4 -4
  2. data/assets/css/romo/base.scss +545 -536
  3. data/assets/css/romo/buttons.scss +200 -196
  4. data/assets/css/romo/colors.scss +213 -209
  5. data/assets/css/romo/datepicker.scss +62 -58
  6. data/assets/css/romo/dropdown.scss +27 -23
  7. data/assets/css/romo/forms.scss +199 -195
  8. data/assets/css/romo/grid.scss +272 -268
  9. data/assets/css/romo/grid_table.scss +281 -277
  10. data/assets/css/romo/indicator_text_input.scss +17 -13
  11. data/assets/css/romo/labels.scss +60 -56
  12. data/assets/css/romo/lists.scss +30 -26
  13. data/assets/css/romo/modal.scss +28 -24
  14. data/assets/css/romo/normalize.scss +417 -413
  15. data/assets/css/romo/select.scss +96 -92
  16. data/assets/css/romo/sortable.scss +13 -9
  17. data/assets/css/romo/table.scss +211 -207
  18. data/assets/css/romo/tabs.scss +58 -54
  19. data/assets/css/romo/tooltip.scss +88 -84
  20. data/assets/css/romo/z_index.scss +23 -19
  21. data/assets/js/romo/select_dropdown.js +4 -1
  22. data/lib/romo/version.rb +1 -1
  23. metadata +2 -2
data/assets/css/romo/datepicker.scss CHANGED
@@ -1,74 +1,78 @@
1
1
  @import 'css/romo/vars';
2
2
  @import 'css/romo/mixins';
3
3
 
4
- .romo-datepicker-wrapper {
5
- position: relative;
6
- }
4
+ .romo {
7
5
 
8
- .romo-datepicker-indicator {
9
- display: inline-block;
10
- position: absolute;
11
- right: 6px;
12
- vertical-align: middle;
13
- cursor: pointer;
14
- }
15
- .romo-datepicker-indicator.disabled {
16
- cursor: $notAllowedCursor;
17
- color: $disabledColor;
18
- }
6
+ .romo-datepicker-wrapper {
7
+ position: relative;
8
+ }
19
9
 
20
- .romo-datepicker-calendar {
21
- padding: $spacingSize0;
22
- @include user-select(none);
10
+ .romo-datepicker-indicator {
11
+ display: inline-block;
12
+ position: absolute;
13
+ right: 6px;
14
+ vertical-align: middle;
15
+ cursor: pointer;
16
+ }
17
+ .romo-datepicker-indicator.disabled {
18
+ cursor: $notAllowedCursor;
19
+ color: $disabledColor;
20
+ }
23
21
 
24
- background-color: $inputBgColor;
25
- color: $inputColor;
26
- }
22
+ .romo-datepicker-calendar {
23
+ padding: $spacingSize0;
24
+ @include user-select(none);
27
25
 
28
- .romo-datepicker-calendar table {
29
- background-color: transparent;
30
- border-collapse: collapse;
31
- border-spacing: 0;
32
- width: 100%;
33
- }
26
+ background-color: $inputBgColor;
27
+ color: $inputColor;
28
+ }
34
29
 
35
- .romo-datepicker-calendar th,
36
- .romo-datepicker-calendar td {
37
- width: 14.285714286%; /* 100% / 7 */
38
- text-align: center;
39
- }
30
+ .romo-datepicker-calendar table {
31
+ background-color: transparent;
32
+ border-collapse: collapse;
33
+ border-spacing: 0;
34
+ width: 100%;
35
+ }
40
36
 
41
- .romo-datepicker-calendar .romo-datepicker-prev,
42
- .romo-datepicker-calendar .romo-datepicker-next,
43
- .romo-datepicker-calendar TD.romo-datepicker-day:not(.disabled) {
44
- cursor: pointer;
45
- }
37
+ .romo-datepicker-calendar th,
38
+ .romo-datepicker-calendar td {
39
+ width: 14.285714286%; /* 100% / 7 */
40
+ text-align: center;
41
+ }
46
42
 
47
- .romo-datepicker-calendar TD.romo-datepicker-day-weekend {
48
- background: $altBgColor;
49
- }
43
+ .romo-datepicker-calendar .romo-datepicker-prev,
44
+ .romo-datepicker-calendar .romo-datepicker-next,
45
+ .romo-datepicker-calendar TD.romo-datepicker-day:not(.disabled) {
46
+ cursor: pointer;
47
+ }
50
48
 
51
- .romo-datepicker-calendar .romo-datepicker-prev:hover,
52
- .romo-datepicker-calendar .romo-datepicker-next:hover,
53
- .romo-datepicker-calendar TD.romo-datepicker-day.romo-datepicker-highlight:not(.disabled) {
54
- background: darken($altBgColor, 10%);
55
- }
49
+ .romo-datepicker-calendar TD.romo-datepicker-day-weekend {
50
+ background: $altBgColor;
51
+ }
56
52
 
57
- .romo-datepicker-calendar TD.romo-datepicker-day.disabled {
58
- cursor: $notAllowedCursor;
59
- color: $disabledColor;
60
- }
53
+ .romo-datepicker-calendar .romo-datepicker-prev:hover,
54
+ .romo-datepicker-calendar .romo-datepicker-next:hover,
55
+ .romo-datepicker-calendar TD.romo-datepicker-day.romo-datepicker-highlight:not(.disabled) {
56
+ background: darken($altBgColor, 10%);
57
+ }
61
58
 
62
- .romo-datepicker-calendar TD.romo-datepicker-day-other {
63
- color: darken($inputDisabledColor, 20%);;
64
- }
59
+ .romo-datepicker-calendar TD.romo-datepicker-day.disabled {
60
+ cursor: $notAllowedCursor;
61
+ color: $disabledColor;
62
+ }
65
63
 
66
- .romo-datepicker-calendar TD.romo-datepicker-day-today {
67
- border: 1px solid $inputColor;
68
- }
64
+ .romo-datepicker-calendar TD.romo-datepicker-day-other {
65
+ color: darken($inputDisabledColor, 20%);;
66
+ }
67
+
68
+ .romo-datepicker-calendar TD.romo-datepicker-day-today {
69
+ border: 1px solid $inputColor;
70
+ }
71
+
72
+ .romo-datepicker-calendar TD.romo-datepicker-day.selected,
73
+ .romo-datepicker-calendar TD.romo-datepicker-day.selected.romo-datepicker-highlight {
74
+ background-color: $inputHighlightBgColor;
75
+ color: $inputBgColor;
76
+ }
69
77
 
70
- .romo-datepicker-calendar TD.romo-datepicker-day.selected,
71
- .romo-datepicker-calendar TD.romo-datepicker-day.selected.romo-datepicker-highlight {
72
- background-color: $inputHighlightBgColor;
73
- color: $inputBgColor;
74
78
  }
data/assets/css/romo/dropdown.scss CHANGED
@@ -1,33 +1,37 @@
1
1
  @import 'css/romo/vars';
2
2
  @import 'css/romo/mixins';
3
3
 
4
- .romo-dropdown,
5
- [data-romo-dropdown-close="true"] {
6
- cursor: pointer;
7
- }
4
+ .romo {
8
5
 
9
- .romo-dropdown-popup {
10
- position: absolute;
11
- float: left;
12
- @include border0;
6
+ .romo-dropdown,
7
+ [data-romo-dropdown-close="true"] {
8
+ cursor: pointer;
9
+ }
13
10
 
14
- background-color: $baseBgColor;
15
- border-color: $baseBorderColor;
16
- border-color: rgba(0, 0, 0, 0.2);
17
- }
11
+ .romo-dropdown-popup {
12
+ position: absolute;
13
+ float: left;
14
+ @include border0;
18
15
 
19
- .romo-dropdown-popup[data-romo-dropdown-fixed="true"] {
20
- position: fixed;
21
- }
16
+ background-color: $baseBgColor;
17
+ border-color: $baseBorderColor;
18
+ border-color: rgba(0, 0, 0, 0.2);
19
+ }
22
20
 
23
- .romo-dropdown-popup[data-romo-dropdown-position="bottom"] {
24
- @include box-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
25
- }
21
+ .romo-dropdown-popup[data-romo-dropdown-fixed="true"] {
22
+ position: fixed;
23
+ }
26
24
 
27
- .romo-dropdown-popup[data-romo-dropdown-position="top"] {
28
- @include box-shadow(0 -3px 10px rgba(0, 0, 0, 0.2));
29
- }
25
+ .romo-dropdown-popup[data-romo-dropdown-position="bottom"] {
26
+ @include box-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
27
+ }
28
+
29
+ .romo-dropdown-popup[data-romo-dropdown-position="top"] {
30
+ @include box-shadow(0 -3px 10px rgba(0, 0, 0, 0.2));
31
+ }
32
+
33
+ .romo-dropdown-popup:not([class*="romo-dropdown-open"]) {
34
+ display: none;
35
+ }
30
36
 
31
- .romo-dropdown-popup:not([class*="romo-dropdown-open"]) {
32
- display: none;
33
37
  }
data/assets/css/romo/forms.scss CHANGED
@@ -1,218 +1,222 @@
1
1
  @import 'css/romo/vars';
2
2
  @import 'css/romo/mixins';
3
3
 
4
- /* defaults */
4
+ .romo {
5
5
 
6
- form { @include rm-push; @include rm-pad; }
7
- label { display: block; }
6
+ /* defaults */
8
7
 
9
- /* basic */
8
+ form { @include rm-push; @include rm-pad; }
9
+ label { display: block; }
10
10
 
11
- .romo-form fieldset {
12
- @include rm-push;
13
- @include rm-pad;
14
- @include rm-border;
15
- }
11
+ /* basic */
16
12
 
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
- }
13
+ .romo-form fieldset {
14
+ @include rm-push;
15
+ @include rm-pad;
16
+ @include rm-border;
17
+ }
26
18
 
27
- .romo-form input,
28
- .romo-form select,
29
- .romo-form textarea,
30
- input.romo-select-dropdown-option-filter {
31
- font-size: 100%;
32
- @include rm-push;
33
- @include align-middle;
34
- }
19
+ .romo-form legend {
20
+ display: block;
21
+ width: 100%;
22
+ @include rm-push;
23
+ @include rm-pad;
24
+ @include push0-bottom;
25
+ @include rm-border;
26
+ @include border1-bottom;
27
+ }
35
28
 
36
- .romo-form label.romo-radio,
37
- .romo-form label.romo-checkbox {
38
- span,
39
- input[type="radio"],
40
- input[type="checkbox"] {
41
- line-height: 1;
29
+ .romo-form input,
30
+ .romo-form select,
31
+ .romo-form textarea,
32
+ input.romo-select-dropdown-option-filter {
33
+ font-size: 100%;
34
+ @include rm-push;
42
35
  @include align-middle;
43
36
  }
44
- }
45
37
 
46
- .romo-form input,
47
- input.romo-select-dropdown-option-filter {
48
- *overflow: visible;
49
- line-height: normal;
50
- }
38
+ .romo-form label.romo-radio,
39
+ .romo-form label.romo-checkbox {
40
+ span,
41
+ input[type="radio"],
42
+ input[type="checkbox"] {
43
+ line-height: 1;
44
+ @include align-middle;
45
+ }
46
+ }
51
47
 
52
- .romo-form textarea {
53
- overflow: auto; @include align-top;
54
- }
48
+ .romo-form input,
49
+ input.romo-select-dropdown-option-filter {
50
+ *overflow: visible;
51
+ line-height: normal;
52
+ }
55
53
 
56
- .romo-form label,
57
- .romo-form select,
58
- .romo-form input[type="button"],
59
- .romo-form input[type="reset"],
60
- .romo-form input[type="submit"],
61
- .romo-form input[type="radio"],
62
- .romo-form input[type="checkbox"] { cursor: pointer; }
63
-
64
- .romo-form input[disabled],
65
- .romo-form select[disabled],
66
- .romo-form textarea[disabled],
67
- .romo-form input[readonly],
68
- .romo-form select[readonly],
69
- .romo-form textarea[readonly],
70
- input.romo-select-dropdown-option-filter[disabled],
71
- input.romo-select-dropdown-option-filter[readonly] { cursor: $notAllowedCursor; }
72
-
73
- .romo-form select {
74
- font-weight: normal;
75
- background-color: $inputBgColor;
76
- @include border1;
77
- }
78
- .romo-form select optgroup { @include select-optgroup; }
79
- .romo-form select option { @include select-option; }
80
-
81
- .romo-form textarea,
82
- .romo-form input[type="text"],
83
- .romo-form input[type="password"],
84
- .romo-form input[type="datetime"],
85
- .romo-form input[type="datetime-local"],
86
- .romo-form input[type="date"],
87
- .romo-form input[type="month"],
88
- .romo-form input[type="time"],
89
- .romo-form input[type="week"],
90
- .romo-form input[type="number"],
91
- .romo-form input[type="email"],
92
- .romo-form input[type="url"],
93
- .romo-form input[type="search"],
94
- .romo-form input[type="tel"],
95
- .romo-form input[type="color"],
96
- input.romo-select-dropdown-option-filter {
97
- font-weight: normal;
98
- background-color: $inputBgColor;
99
- @include border1;
100
- @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
101
- }
54
+ .romo-form textarea {
55
+ overflow: auto; @include align-top;
56
+ }
102
57
 
103
- .romo-form select:focus,
104
- .romo-form textarea:focus,
105
- .romo-form input[type="text"]:focus,
106
- .romo-form input[type="password"]:focus,
107
- .romo-form input[type="datetime"]:focus,
108
- .romo-form input[type="datetime-local"]:focus,
109
- .romo-form input[type="date"]:focus,
110
- .romo-form input[type="month"]:focus,
111
- .romo-form input[type="time"]:focus,
112
- .romo-form input[type="week"]:focus,
113
- .romo-form input[type="number"]:focus,
114
- .romo-form input[type="email"]:focus,
115
- .romo-form input[type="url"]:focus,
116
- .romo-form input[type="search"]:focus,
117
- .romo-form input[type="tel"]:focus,
118
- .romo-form input[type="color"]:focus,
119
- input.romo-select-dropdown-option-filter:focus {
120
- @include input-focus;
121
- }
58
+ .romo-form label,
59
+ .romo-form select,
60
+ .romo-form input[type="button"],
61
+ .romo-form input[type="reset"],
62
+ .romo-form input[type="submit"],
63
+ .romo-form input[type="radio"],
64
+ .romo-form input[type="checkbox"] { cursor: pointer; }
65
+
66
+ .romo-form input[disabled],
67
+ .romo-form select[disabled],
68
+ .romo-form textarea[disabled],
69
+ .romo-form input[readonly],
70
+ .romo-form select[readonly],
71
+ .romo-form textarea[readonly],
72
+ input.romo-select-dropdown-option-filter[disabled],
73
+ input.romo-select-dropdown-option-filter[readonly] { cursor: $notAllowedCursor; }
74
+
75
+ .romo-form select {
76
+ font-weight: normal;
77
+ background-color: $inputBgColor;
78
+ @include border1;
79
+ }
80
+ .romo-form select optgroup { @include select-optgroup; }
81
+ .romo-form select option { @include select-option; }
82
+
83
+ .romo-form textarea,
84
+ .romo-form input[type="text"],
85
+ .romo-form input[type="password"],
86
+ .romo-form input[type="datetime"],
87
+ .romo-form input[type="datetime-local"],
88
+ .romo-form input[type="date"],
89
+ .romo-form input[type="month"],
90
+ .romo-form input[type="time"],
91
+ .romo-form input[type="week"],
92
+ .romo-form input[type="number"],
93
+ .romo-form input[type="email"],
94
+ .romo-form input[type="url"],
95
+ .romo-form input[type="search"],
96
+ .romo-form input[type="tel"],
97
+ .romo-form input[type="color"],
98
+ input.romo-select-dropdown-option-filter {
99
+ font-weight: normal;
100
+ background-color: $inputBgColor;
101
+ @include border1;
102
+ @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
103
+ }
122
104
 
123
- .romo-form input[disabled],
124
- .romo-form select[disabled],
125
- .romo-form textarea[disabled],
126
- .romo-form input[readonly],
127
- .romo-form select[readonly],
128
- .romo-form textarea[readonly],
129
- input.romo-select-dropdown-option-filter[disabled],
130
- input.romo-select-dropdown-option-filter[readonly] { background-color: $inputDisabledColor; }
131
-
132
- .romo-form input[type="radio"][disabled],
133
- .romo-form input[type="checkbox"][disabled],
134
- .romo-form input[type="radio"][readonly],
135
- .romo-form input[type="checkbox"][readonly] { background-color: transparent };
136
-
137
- .romo-form select,
138
- .romo-form input[type="text"],
139
- .romo-form input[type="password"],
140
- .romo-form input[type="datetime"],
141
- .romo-form input[type="datetime-local"],
142
- .romo-form input[type="date"],
143
- .romo-form input[type="month"],
144
- .romo-form input[type="time"],
145
- .romo-form input[type="week"],
146
- .romo-form input[type="number"],
147
- .romo-form input[type="email"],
148
- .romo-form input[type="url"],
149
- .romo-form input[type="search"],
150
- .romo-form input[type="tel"],
151
- .romo-form input[type="color"],
152
- input.romo-select-dropdown-option-filter {
153
- height: $inputHeight;
154
- line-height: $baseLineHeight;
155
- @include align-middle;
156
- }
105
+ .romo-form select:focus,
106
+ .romo-form textarea:focus,
107
+ .romo-form input[type="text"]:focus,
108
+ .romo-form input[type="password"]:focus,
109
+ .romo-form input[type="datetime"]:focus,
110
+ .romo-form input[type="datetime-local"]:focus,
111
+ .romo-form input[type="date"]:focus,
112
+ .romo-form input[type="month"]:focus,
113
+ .romo-form input[type="time"]:focus,
114
+ .romo-form input[type="week"]:focus,
115
+ .romo-form input[type="number"]:focus,
116
+ .romo-form input[type="email"]:focus,
117
+ .romo-form input[type="url"]:focus,
118
+ .romo-form input[type="search"]:focus,
119
+ .romo-form input[type="tel"]:focus,
120
+ .romo-form input[type="color"]:focus,
121
+ input.romo-select-dropdown-option-filter:focus {
122
+ @include input-focus;
123
+ }
157
124
 
158
- input.romo-select-dropdown-option-filter {
159
- height: $inputFilterHeight;
160
- }
125
+ .romo-form input[disabled],
126
+ .romo-form select[disabled],
127
+ .romo-form textarea[disabled],
128
+ .romo-form input[readonly],
129
+ .romo-form select[readonly],
130
+ .romo-form textarea[readonly],
131
+ input.romo-select-dropdown-option-filter[disabled],
132
+ input.romo-select-dropdown-option-filter[readonly] { background-color: $inputDisabledColor; }
133
+
134
+ .romo-form input[type="radio"][disabled],
135
+ .romo-form input[type="checkbox"][disabled],
136
+ .romo-form input[type="radio"][readonly],
137
+ .romo-form input[type="checkbox"][readonly] { background-color: transparent };
138
+
139
+ .romo-form select,
140
+ .romo-form input[type="text"],
141
+ .romo-form input[type="password"],
142
+ .romo-form input[type="datetime"],
143
+ .romo-form input[type="datetime-local"],
144
+ .romo-form input[type="date"],
145
+ .romo-form input[type="month"],
146
+ .romo-form input[type="time"],
147
+ .romo-form input[type="week"],
148
+ .romo-form input[type="number"],
149
+ .romo-form input[type="email"],
150
+ .romo-form input[type="url"],
151
+ .romo-form input[type="search"],
152
+ .romo-form input[type="tel"],
153
+ .romo-form input[type="color"],
154
+ input.romo-select-dropdown-option-filter {
155
+ height: $inputHeight;
156
+ line-height: $baseLineHeight;
157
+ @include align-middle;
158
+ }
161
159
 
162
- .romo-form textarea,
163
- .romo-form input[type="text"],
164
- .romo-form input[type="password"],
165
- .romo-form input[type="datetime"],
166
- .romo-form input[type="datetime-local"],
167
- .romo-form input[type="date"],
168
- .romo-form input[type="month"],
169
- .romo-form input[type="time"],
170
- .romo-form input[type="week"],
171
- .romo-form input[type="number"],
172
- .romo-form input[type="email"],
173
- .romo-form input[type="url"],
174
- .romo-form input[type="search"],
175
- .romo-form input[type="tel"],
176
- .romo-form input[type="color"],
177
- input.romo-select-dropdown-option-filter {
178
- display: inline-block;
179
- padding: 4px 6px;
180
- color: $inputColor;
181
- }
160
+ input.romo-select-dropdown-option-filter {
161
+ height: $inputFilterHeight;
162
+ }
182
163
 
183
- input.romo-select-dropdown-option-filter {
184
- display: block;
185
- width: 100%;
186
- }
164
+ .romo-form textarea,
165
+ .romo-form input[type="text"],
166
+ .romo-form input[type="password"],
167
+ .romo-form input[type="datetime"],
168
+ .romo-form input[type="datetime-local"],
169
+ .romo-form input[type="date"],
170
+ .romo-form input[type="month"],
171
+ .romo-form input[type="time"],
172
+ .romo-form input[type="week"],
173
+ .romo-form input[type="number"],
174
+ .romo-form input[type="email"],
175
+ .romo-form input[type="url"],
176
+ .romo-form input[type="search"],
177
+ .romo-form input[type="tel"],
178
+ .romo-form input[type="color"],
179
+ input.romo-select-dropdown-option-filter {
180
+ display: inline-block;
181
+ padding: 4px 6px;
182
+ color: $inputColor;
183
+ }
184
+
185
+ input.romo-select-dropdown-option-filter {
186
+ display: block;
187
+ width: 100%;
188
+ }
187
189
 
188
- .romo-form textarea,
189
- .romo-form select[multiple],
190
- .romo-form select[size] { height: auto; }
190
+ .romo-form textarea,
191
+ .romo-form select[multiple],
192
+ .romo-form select[size] { height: auto; }
191
193
 
192
- .romo-form input[type="file"] {
193
- height: ($baseLineHeight / 2) * 3; /* 30px */
194
- line-height: ($baseLineHeight / 2) * 3; /* 30px */
195
- }
194
+ .romo-form input[type="file"] {
195
+ height: ($baseLineHeight / 2) * 3; /* 30px */
196
+ line-height: ($baseLineHeight / 2) * 3; /* 30px */
197
+ }
198
+
199
+ .romo-input,
200
+ .romo-input1 { width: $inputSize1; }
201
+ .romo-input-small,
202
+ .romo-input0 { width: $inputSize0; }
203
+ .romo-input-large,
204
+ .romo-input2 { width: $inputSize2; }
205
+
206
+ .romo-input-block { width: 100%; display: block; }
207
+
208
+ .romo-form input[type="file"],
209
+ .romo-form input[type="image"],
210
+ .romo-form input[type="submit"],
211
+ .romo-form input[type="reset"],
212
+ .romo-form input[type="button"],
213
+ .romo-form input[type="radio"],
214
+ .romo-form input[type="checkbox"] { width: auto; }
215
+
216
+ .romo-form .romo-input-inline,
217
+ .romo-form .romo-input-help {
218
+ line-height: $inputHeight;
219
+ @include align-middle;
220
+ }
196
221
 
197
- .romo-input,
198
- .romo-input1 { width: $inputSize1; }
199
- .romo-input-small,
200
- .romo-input0 { width: $inputSize0; }
201
- .romo-input-large,
202
- .romo-input2 { width: $inputSize2; }
203
-
204
- .romo-input-block { width: 100%; display: block; }
205
-
206
- .romo-form input[type="file"],
207
- .romo-form input[type="image"],
208
- .romo-form input[type="submit"],
209
- .romo-form input[type="reset"],
210
- .romo-form input[type="button"],
211
- .romo-form input[type="radio"],
212
- .romo-form input[type="checkbox"] { width: auto; }
213
-
214
- .romo-form .romo-input-inline,
215
- .romo-form .romo-input-help {
216
- line-height: $inputHeight;
217
- @include align-middle;
218
222
  }