romo 0.18.2 → 0.19.0

Sign up to get free protection for your applications and to get access to all the features.
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
  }