romo 0.17.1 → 0.18.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/Gemfile +6 -3
  3. data/assets/css/romo/_mixins.scss +190 -60
  4. data/assets/css/romo/_vars.scss +262 -100
  5. data/assets/css/romo/base.scss +0 -106
  6. data/assets/css/romo/buttons.scss +58 -68
  7. data/assets/css/romo/colors.scss +212 -0
  8. data/assets/css/romo/datepicker.scss +2 -2
  9. data/assets/css/romo/grid_table.scss +215 -70
  10. data/assets/css/romo/labels.scss +39 -13
  11. data/assets/css/romo/table.scss +151 -51
  12. data/assets/js/romo/ajax.js +114 -0
  13. data/assets/js/romo/date.js +310 -0
  14. data/assets/js/romo/datepicker.js +35 -194
  15. data/assets/js/romo/dropdown.js +6 -6
  16. data/assets/js/romo/inline.js +3 -3
  17. data/assets/js/romo/modal.js +6 -6
  18. data/assets/js/romo/tooltip.js +9 -9
  19. data/lib/romo/dassets.rb +3 -1
  20. data/lib/romo/version.rb +1 -1
  21. data/test/unit/dassets_tests.rb +3 -1
  22. metadata +5 -3
  23. data/assets/js/romo/invoke.js +0 -112
data/assets/css/romo/_vars.scss CHANGED
@@ -39,117 +39,279 @@ $notAllowedCursor: not-allowed;
39
39
 
40
40
  $baseColor: #444;
41
41
  $altColor: #444;
42
+ $inverseColor: #fff;
42
43
  $disabledColor: #999;
43
44
 
44
- $baseBgColor: #fff;
45
- $altBgColor: #ececec;
46
- $stripedBgColor: #fafafa;
47
- $bgColorHover: #f5f5f5;
48
-
49
- $baseBorderColor: #ccc;
50
- $altBorderColor: #fff;
51
-
52
- $linkColor: #08c;
45
+ $baseBgColor: #fff;
46
+ $altBgColor: #ececec;
47
+ $inverseBgColor: #333;
48
+ $disabledBgColor: #f9f9f9;
49
+ $stripedBgColor: #fafafa;
50
+ $bgColorHover: #f5f5f5;
51
+
52
+ $baseBorderColor: #ccc;
53
+ $altBorderColor: #fff;
54
+ $inverseBorderColor: #000;
55
+
56
+ $darkRed: #ce040d;
57
+ $red: #ee4136;
58
+ $lightRed: #ff725c;
59
+ $pastelRed: #ffdfdf;
60
+ $darkOrange: #ff6300;
61
+ $orange: #ffa700;
62
+ $yellow: #ffde37;
63
+ $pastelYellow: #fbf5d5;
64
+ $purple: #5e2ca5;
65
+ $lightPurple: #a463f2;
66
+ $darkPink: #d5008f;
67
+ $hotPink: #ff41b4;
68
+ $pink: #ff8fd2;
69
+ $darkGreen: #137752;
70
+ $green: #51a351;
71
+ $lightGreen: #9eebcf;
72
+ $pastelGreen: #dff0d8;
73
+ $navy: #001b44;
74
+ $darkBlue: #00449e;
75
+ $blue: #357edd;
76
+ $lightBlue: #96ccff;
77
+ $pastelBlue: #d9edf7;
78
+
79
+ /* basics colors */
80
+
81
+ $linkColor: $blue;
53
82
  $linkColorHover: darken($linkColor, 15%);
54
83
 
55
- $inputBgColor: #fff;
56
- $inputAltBgColor: #eee;
57
- $inputColor: #444;
58
- $inputDisabledColor: #eee;
84
+ $inputBgColor: $baseBgColor;
85
+ $inputColor: $baseColor;
86
+ $inputDisabledColor: $altBgColor;
59
87
  $inputFocusColor: rgba(82, 168, 236, 0.8);
60
- $inputHighlightBgColor: #3c83c7;
61
-
62
- $btnBorder: $baseBorderColor;
63
- $btnBackground: $baseBgColor;
64
- $btnBackgroundHighlight: darken($btnBackground, 10%);
65
- $btnColor: $baseColor;
66
- $btnColorHover: #333;
67
-
68
- $btnAltBackground: $altBgColor;
69
- $btnAltBackgroundHighlight: darken($btnAltBackground, 10%);
70
- $btnAltColor: $btnColor;
71
-
72
- $btnPrimaryBackground: $linkColor;
73
- $btnPrimaryBackgroundHighlight: adjust_hue($btnPrimaryBackground, 20%);
74
- $btnPrimaryColor: #fff;
75
-
76
- $btnWarningBackgroundHighlight: #f89406;
77
- $btnWarningBackground: lighten($btnWarningBackgroundHighlight, 15%);
78
- $btnWarningColor: #fff;
79
-
80
- $btnDangerBackground: #ee5f5b;
81
- $btnDangerBackgroundHighlight: #bd362f;
82
- $btnDangerColor: #fff;
83
-
84
- $btnInfoBackground: #5bc0de;
85
- $btnInfoBackgroundHighlight: #2f96b4;
86
- $btnInfoColor: #fff;
87
-
88
- $btnSuccessBackground: #62c462;
89
- $btnSuccessBackgroundHighlight: #51a351;
90
- $btnSuccessColor: #fff;
91
-
92
- $btnInverseBackground: #444;
93
- $btnInverseBackgroundHighlight: #222;
94
- $btnInverseColor: #fff;
95
-
96
- $baseText: $baseColor;
97
- $baseTextHover: $baseText;
98
- $baseBackground: $baseBgColor;
99
- $baseBackgroundHover: $baseBackground;
100
- $baseBorder: $baseBorderColor;
101
-
102
- $altText: $altColor;
103
- $altTextHover: $altColor;
104
- $altBackground: $altBgColor;
105
- $altBackgroundHover: $altBackground;
106
- $altBorder: $altBorderColor;
107
-
108
- $mutedText: #999999;
109
- $mutedTextHover: darken($mutedText, 10%);
110
- $mutedBackground: #f9f9f9;
111
- $mutedBackgroundHover: darken($mutedBackground, 5%);
112
- $mutedBorder: darken(adjust_hue($mutedBackground, -10), 5%);
113
-
114
- $warningText: #c09853;
115
- $warningTextHover: darken($warningText, 10%);
116
- $warningBackground: #fcf8e3;
117
- $warningBackgroundHover: darken($warningBackground, 5%);
118
- $warningBorder: darken(adjust_hue($warningBackground, -10), 3%);
119
-
120
- $errorText: #b94a48;
121
- $errorTextHover: darken($errorText, 10%);
122
- $errorBackground: #f2dede;
123
- $errorBackgroundHover: darken($errorBackground, 5%);
124
- $errorBorder: darken(adjust_hue($errorBackground, -10), 3%);
125
-
126
- $infoText: #3a87ad;
127
- $infoTextHover: darken($infoText, 10%);
128
- $infoBackground: #d9edf7;
129
- $infoBackgroundHover: darken($infoBackground, 5%);
130
- $infoBorder: darken(adjust_hue($infoBackground, -10), 7%);
131
-
132
- $successText: #468847;
133
- $successTextHover: darken($successText, 10%);
134
- $successBackground: #dff0d8;
135
- $successBackgroundHover: darken($successBackground, 5%);
136
- $successBorder: darken(adjust_hue($successBackground, -10), 5%);
137
-
138
- $inverseText: #ffffff;
139
- $inverseTextHover: darken($inverseText, 10%);
140
- $inverseBackground: #444444;
141
- $inverseBackgroundHover: darken($inverseBackground, 5%);
142
- $inverseBorder: darken(adjust_hue($inverseBackground, -10), 3%);
88
+ $inputHighlightBgColor: $blue;
143
89
 
144
90
  $tabBgColor: $altBgColor;
145
91
  $tabBgColorHover: darken($altBgColor, 5%);
146
- $tabBgColorActive: #222;
92
+ $tabBgColorActive: $inverseBgColor;
147
93
  $tabColor: $baseColor;
148
- $tabColorActive: #fff;
94
+ $tabColorActive: $inverseColor;
149
95
  $tabColorDisabled: $disabledColor;
150
96
 
151
- $tooltipBgColor: #222;
152
- $tooltipColor: #eee;
97
+ $tooltipBgColor: $inverseBgColor;
98
+ $tooltipColor: $inverseColor;
99
+
100
+ $btnBorder: $baseBorderColor;
101
+ $btnBg: darken($baseBgColor, 3%);
102
+ $btnBgHover: darken($btnBg, 10%);
103
+ $btnColor: $baseColor;
104
+ $btnColorHover: #333;
105
+
106
+ $btnAltBg: darken($altBgColor, 4%);
107
+ $btnAltBgHover: darken($btnAltBg, 10%);
108
+ $btnAltColor: $btnColor;
109
+
110
+ $baseText: $baseColor;
111
+ $baseTextHover: $baseText;
112
+ $baseBg: $baseBgColor;
113
+ $baseBgHover: $baseBg;
114
+ $baseBorder: $baseBorderColor;
115
+
116
+ $altText: $altColor;
117
+ $altTextHover: $altColor;
118
+ $altBg: $altBgColor;
119
+ $altBgHover: $altBg;
120
+ $altBorder: $altBorderColor;
121
+
122
+ $mutedText: $disabledColor;
123
+ $mutedTextHover: darken($mutedText, 10%);
124
+ $mutedBg: $disabledBgColor;
125
+ $mutedBgHover: darken($mutedBg, 5%);
126
+ $mutedBorder: darken(adjust_hue($mutedBg, -10), 7%);
127
+
128
+ /* emphasis colors */
129
+
130
+ $btnWarningBg: $orange;
131
+ $btnWarningBgHover: darken($btnWarningBg, 5%);
132
+ $btnWarningColor: $inverseColor;
133
+
134
+ $btnDangerBg: $red;
135
+ $btnDangerBgHover: darken($btnDangerBg, 10%);
136
+ $btnDangerColor: $inverseColor;
137
+
138
+ $btnInfoBg: $blue;
139
+ $btnInfoBgHover: darken($btnInfoBg, 10%);
140
+ $btnInfoColor: $inverseColor;
141
+
142
+ $btnSuccessBg: $green;
143
+ $btnSuccessBgHover: darken($btnSuccessBg, 10%);
144
+ $btnSuccessColor: $inverseColor;
145
+
146
+ $btnInverseBg: $inverseBgColor;
147
+ $btnInverseBgHover: darken($btnInverseBg, 10%);
148
+ $btnInverseColor: $inverseColor;
149
+
150
+ $warningText: darken($orange, 5%);
151
+ $warningTextHover: darken($warningText, 10%);
152
+ $warningBg: $pastelYellow;
153
+ $warningBgHover: darken($warningBg, 5%);
154
+ $warningBorder: darken(adjust_hue($warningBg, -10), 7%);
155
+
156
+ $dangerText: darken($red, 5%);
157
+ $dangerTextHover: darken($dangerText, 10%);
158
+ $dangerBg: $pastelRed;
159
+ $dangerBgHover: darken($dangerBg, 5%);
160
+ $dangerBorder: darken(adjust_hue($dangerBg, -10), 7%);
161
+
162
+ $infoText: darken($blue, 5%);
163
+ $infoTextHover: darken($infoText, 10%);
164
+ $infoBg: $pastelBlue;
165
+ $infoBgHover: darken($infoBg, 5%);
166
+ $infoBorder: darken(adjust_hue($infoBg, -10), 7%);
167
+
168
+ $successText: darken($green, 5%);
169
+ $successTextHover: darken($successText, 10%);
170
+ $successBg: $pastelGreen;
171
+ $successBgHover: darken($successBg, 5%);
172
+ $successBorder: darken(adjust_hue($successBg, -10), 7%);
173
+
174
+ $inverseText: $inverseColor;
175
+ $inverseTextHover: darken($inverseText, 10%);
176
+ $inverseBg: $inverseBgColor;
177
+ $inverseBgHover: darken($inverseBg, 5%);
178
+ $inverseBorder: darken(adjust_hue($inverseBg, -10), 7%);
179
+
180
+ /* explicit colors */
181
+
182
+ $darkRedTextHover: darken($darkRed, 10%);
183
+ $darkRedBgHover: darken($darkRed, 5%);
184
+ $redTextHover: darken($red, 10%);
185
+ $redBgHover: darken($red, 5%);
186
+ $lightRedTextHover: darken($lightRed, 10%);
187
+ $lightRedBgHover: darken($lightRed, 5%);
188
+ $pastelRedTextHover: darken($pastelRed, 10%);
189
+ $pastelRedBgHover: darken($pastelRed, 5%);
190
+ $darkOrangeTextHover: darken($darkOrange, 10%);
191
+ $darkOrangeBgHover: darken($darkOrange, 5%);
192
+ $orangeTextHover: darken($orange, 10%);
193
+ $orangeBgHover: darken($orange, 5%);
194
+ $yellowTextHover: darken($yellow, 10%);
195
+ $yellowBgHover: darken($yellow, 10%);
196
+ $pastelYellowTextHover: darken($pastelYellow, 10%);
197
+ $pastelYellowBgHover: darken($pastelYellow, 5%);
198
+ $purpleTextHover: darken($purple, 10%);
199
+ $purpleBgHover: darken($purple, 5%);
200
+ $lightPurpleTextHover: darken($lightPurple, 10%);
201
+ $lightPurpleBgHover: darken($lightPurple, 5%);
202
+ $darkPinkTextHover: darken($darkPink, 10%);
203
+ $darkPinkBgHover: darken($darkPink, 5%);
204
+ $hotPinkTextHover: darken($hotPink, 10%);
205
+ $hotPinkBgHover: darken($hotPink, 5%);
206
+ $pinkTextHover: darken($pink, 10%);
207
+ $pinkBgHover: darken($pink, 5%);
208
+ $darkGreenTextHover: darken($darkGreen, 10%);
209
+ $darkGreenBgHover: darken($darkGreen, 5%);
210
+ $greenTextHover: darken($green, 10%);
211
+ $greenBgHover: darken($green, 5%);
212
+ $lightGreenTextHover: darken($lightGreen, 10%);
213
+ $lightGreenBgHover: darken($lightGreen, 5%);
214
+ $pastelGreenTextHover: darken($pastelGreen, 10%);
215
+ $pastelGreenBgHover: darken($pastelGreen, 5%);
216
+ $navyTextHover: darken($navy, 10%);
217
+ $navyBgHover: darken($navy, 5%);
218
+ $darkBlueTextHover: darken($darkBlue, 10%);
219
+ $darkBlueBgHover: darken($darkBlue, 5%);
220
+ $blueTextHover: darken($blue, 10%);
221
+ $blueBgHover: darken($blue, 5%);
222
+ $lightBlueTextHover: darken($lightBlue, 10%);
223
+ $lightBlueBgHover: darken($lightBlue, 5%);
224
+ $pastelBlueTextHover: darken($pastelBlue, 10%);
225
+ $pastelBlueBgHover: darken($pastelBlue, 5%);
226
+
227
+
228
+ $btnDarkRedBg: $darkRed;
229
+ $btnDarkRedBgHover: $darkRedBgHover;
230
+ $btnDarkRedColor: $inverseColor;
231
+
232
+ $btnRedBg: $red;
233
+ $btnRedBgHover: $redBgHover;
234
+ $btnRedColor: $inverseColor;
235
+
236
+ $btnLightRedBg: $lightRed;
237
+ $btnLightRedBgHover: $lightRedBgHover;
238
+ $btnLightRedColor: $inverseColor;
239
+
240
+ $btnPastelRedBg: $pastelRed;
241
+ $btnPastelRedBgHover: $pastelRedBgHover;
242
+ $btnPastelRedColor: $baseColor;
243
+
244
+ $btnDarkOrangeBg: $darkOrange;
245
+ $btnDarkOrangeBgHover: $darkOrangeBgHover;
246
+ $btnDarkOrangeColor: $inverseColor;
247
+
248
+ $btnOrangeBg: $orange;
249
+ $btnOrangeBgHover: $orangeBgHover;
250
+ $btnOrangeColor: $inverseColor;
251
+
252
+ $btnYellowBg: $yellow;
253
+ $btnYellowBgHover: $yellowBgHover;
254
+ $btnYellowColor: $baseColor;
255
+
256
+ $btnPastelYellowBg: $pastelYellow;
257
+ $btnPastelYellowBgHover: $pastelYellowBgHover;
258
+ $btnPastelYellowColor: $baseColor;
259
+
260
+ $btnPurpleBg: $purple;
261
+ $btnPurpleBgHover: $purpleBgHover;
262
+ $btnPurpleColor: $inverseColor;
263
+
264
+ $btnLightPurpleBg: $lightPurple;
265
+ $btnLightPurpleBgHover: $lightPurpleBgHover;
266
+ $btnLightPurpleColor: $inverseColor;
267
+
268
+ $btnDarkPinkBg: $darkPink;
269
+ $btnDarkPinkBgHover: $darkPinkBgHover;
270
+ $btnDarkPinkColor: $inverseColor;
271
+
272
+ $btnHotPinkBg: $hotPink;
273
+ $btnHotPinkBgHover: $hotPinkBgHover;
274
+ $btnHotPinkColor: $inverseColor;
275
+
276
+ $btnPinkBg: $pink;
277
+ $btnPinkBgHover: $pinkBgHover;
278
+ $btnPinkColor: $inverseColor;
279
+
280
+ $btnDarkGreenBg: $darkGreen;
281
+ $btnDarkGreenBgHover: $darkGreenBgHover;
282
+ $btnDarkGreenColor: $inverseColor;
283
+
284
+ $btnGreenBg: $green;
285
+ $btnGreenBgHover: $greenBgHover;
286
+ $btnGreenColor: $inverseColor;
287
+
288
+ $btnLightGreenBg: $lightGreen;
289
+ $btnLightGreenBgHover: $lightGreenBgHover;
290
+ $btnLightGreenColor: $baseColor;
291
+
292
+ $btnPastelGreenBg: $pastelGreen;
293
+ $btnPastelGreenBgHover: $pastelGreenBgHover;
294
+ $btnPastelGreenColor: $baseColor;
295
+
296
+ $btnNavyBg: $navy;
297
+ $btnNavyBgHover: $navyBgHover;
298
+ $btnNavyColor: $inverseColor;
299
+
300
+ $btnDarkBlueBg: $darkBlue;
301
+ $btnDarkBlueBgHover: $darkBlueBgHover;
302
+ $btnDarkBlueColor: $inverseColor;
303
+
304
+ $btnBlueBg: $blue;
305
+ $btnBlueBgHover: $blueBgHover;
306
+ $btnBlueColor: $inverseColor;
307
+
308
+ $btnLightBlueBg: $lightBlue;
309
+ $btnLightBlueBgHover: $lightBlueBgHover;
310
+ $btnLightBlueColor: $inverseColor;
311
+
312
+ $btnPastelBlueBg: $pastelBlue;
313
+ $btnPastelBlueBgHover: $pastelBlueBgHover;
314
+ $btnPastelBlueColor: $baseColor;
153
315
 
154
316
  /* borders */
155
317
 
data/assets/css/romo/base.scss CHANGED
@@ -220,112 +220,6 @@ h3 { @include text1; }
220
220
  .romo-align-middle { @include align-middle(!important); }
221
221
  .romo-align-bottom { @include align-bottom(!important); }
222
222
 
223
- /* color emphasis */
224
-
225
- .romo-bg-base { @include bg-base(!important); }
226
- .romo-bg-alt { @include bg-alt(!important); }
227
- .romo-bg-hover { @include bg-hover(!important); }
228
-
229
- .romo-border-base { @include border-base(!important); }
230
- .romo-border-alt { @include border-alt(!important); }
231
-
232
- .romo-text-border-base { @include text-border-base(!important); }
233
- .romo-text-border-alt { @include text-border-alt(!important); }
234
- .romo-text-disabled { @include text-disabled(!important); }
235
- .romo-text-base { @include text-base(!important); }
236
- .romo-text-alt { @include text-alt(!important); }
237
- .romo-text-muted { @include text-muted(!important); }
238
- .romo-text-warning { @include text-warning(!important); }
239
- .romo-text-error { @include text-error(!important); }
240
- .romo-text-info { @include text-info(!important); }
241
- .romo-text-success { @include text-success(!important); }
242
- .romo-text-inverse { @include text-inverse(!important); }
243
-
244
- .romo-text-base-hover:hover, a.romo-text-base:hover, a.romo-text-base:focus {
245
- @include text-base-hover(!important);
246
- }
247
- .romo-text-alt-hover:hover, a.romo-text-alt:hover, a.romo-text-alt:focus {
248
- @include text-alt-hover(!important);
249
- }
250
- .romo-text-muted-hover:hover, a.romo-text-muted:hover, a.romo-text-muted:focus {
251
- @include text-muted-hover(!important);
252
- }
253
- .romo-text-warning-hover:hover, a.romo-text-warning:hover, a.romo-text-warning:focus {
254
- @include text-warning-hover(!important);
255
- }
256
- .romo-text-error-hover:hover, a.romo-text-error:hover, a.romo-text-error:focus {
257
- @include text-error-hover(!important);
258
- }
259
- .romo-text-info-hover:hover, a.romo-text-info:hover, a.romo-text-info:focus {
260
- @include text-info-hover(!important);
261
- }
262
- .romo-text-success-hover:hover, a.romo-text-success:hover, a.romo-text-success:focus {
263
- @include text-success-hover(!important);
264
- }
265
- .romo-text-inverse-hover:hover, a.romo-text-inverse:hover, a.romo-text-inverse:focus {
266
- @include text-inverse-hover(!important);
267
- }
268
-
269
- .romo-bg-base { @include bg-base(!important); }
270
- .romo-bg-alt { @include bg-alt(!important); }
271
- .romo-bg-muted { @include bg-muted(!important); }
272
- .romo-bg-warning { @include bg-warning(!important); }
273
- .romo-bg-error { @include bg-error(!important); }
274
- .romo-bg-info { @include bg-info(!important); }
275
- .romo-bg-success { @include bg-success(!important); }
276
- .romo-bg-inverse { @include bg-inverse(!important); }
277
-
278
- .romo-bg-base-hover:hover, a.romo-bg-base:hover, a.romo-bg-base:focus {
279
- @include bg-base-hover(!important);
280
- }
281
- .romo-bg-alt-hover:hover, a.romo-bg-alt:hover, a.romo-bg-alt:focus {
282
- @include bg-alt-hover(!important);
283
- }
284
- .romo-bg-muted-hover:hover, a.romo-bg-muted:hover, a.romo-bg-muted:focus {
285
- @include bg-muted-hover(!important);
286
- }
287
- .romo-bg-warning-hover:hover, a.romo-bg-warning:hover, a.romo-bg-warning:focus {
288
- @include bg-warning-hover(!important);
289
- }
290
- .romo-bg-error-hover:hover, a.romo-bg-error:hover, a.romo-bg-error:focus {
291
- @include bg-error-hover(!important);
292
- }
293
- .romo-bg-info-hover:hover, a.romo-bg-info:hover, a.romo-bg-info:focus {
294
- @include bg-info-hover(!important);
295
- }
296
- .romo-bg-success-hover:hover, a.romo-bg-success:hover, a.romo-bg-success:focus {
297
- @include bg-success-hover(!important);
298
- }
299
- .romo-bg-inverse-hover:hover, a.romo-bg-inverse:hover, a.romo-bg-inverse:focus {
300
- @include bg-inverse-hover(!important);
301
- }
302
-
303
- .romo-border-muted { @include border-muted(!important); }
304
- .romo-border-warning { @include border-warning(!important); }
305
- .romo-border-error { @include border-error(!important); }
306
- .romo-border-info { @include border-info(!important); }
307
- .romo-border-success { @include border-success(!important); }
308
- .romo-border-inverse { @include border-inverse(!important); }
309
-
310
- .romo-border-muted-hover:hover, a.romo-border-muted:hover, a.romo-border-muted:focus {
311
- @include border-muted(!important);
312
- }
313
- .romo-border-warning-hover:hover, a.romo-border-warning:hover, a.romo-border-warning:focus {
314
- @include border-warning(!important);
315
- }
316
- .romo-border-error-hover:hover, a.romo-border-error:hover, a.romo-border-error:focus {
317
- @include border-error(!important);
318
- }
319
- .romo-border-info-hover:hover, a.romo-border-info:hover, a.romo-border-info:focus {
320
- @include border-info(!important);
321
- }
322
- .romo-border-success-hover:hover, a.romo-border-success:hover, a.romo-border-success:focus {
323
- @include border-success(!important);
324
- }
325
- .romo-border-inverse-hover:hover, a.romo-border-inverse:hover, a.romo-border-inverse:focus {
326
- @include border-inverse(!important);
327
- }
328
-
329
223
  /* Scaffolding */
330
224
  /* ----------- */
331
225
 
data/assets/css/romo/buttons.scss CHANGED
@@ -9,7 +9,7 @@ button.romo-btn,
9
9
  @include align-center;
10
10
  @include align-middle;
11
11
 
12
- @include button-bg($btnBackground, $btnBackgroundHighlight, $btnColor);
12
+ @include button-bg($btnBg, $btnBgHover, $btnColor);
13
13
  @include border1;
14
14
  border-color: $btnBorder;
15
15
  border-bottom-color: darken($btnBorder, 10%);
@@ -79,79 +79,69 @@ input[type="reset"].romo-btn-block,
79
79
  input[type="button"].romo-btn-block,
80
80
  .romo-btn-block { display: block; width: 100%; }
81
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] {
82
+ /* emphasis colored buttons */
83
+
84
+ a.romo-btn.romo-btn-alt, button.romo-btn.romo-btn-alt, .romo-btn.romo-btn-alt { @include button-bg($btnAltBg, $btnAltBgHover, $btnAltColor); }
85
+ a.romo-btn.romo-btn-inverse, button.romo-btn.romo-btn-inverse, .romo-btn.romo-btn-inverse { @include button-bg($btnInverseBg, $btnInverseBgHover, $btnInverseColor); }
86
+ a.romo-btn.romo-btn-warning, button.romo-btn.romo-btn-warning, .romo-btn.romo-btn-warning { @include button-bg($btnWarningBg, $btnWarningBgHover, $btnWarningColor); }
87
+ a.romo-btn.romo-btn-danger, button.romo-btn.romo-btn-danger, .romo-btn.romo-btn-danger { @include button-bg($btnDangerBg, $btnDangerBgHover, $btnDangerColor); }
88
+ a.romo-btn.romo-btn-info, button.romo-btn.romo-btn-info, .romo-btn.romo-btn-info { @include button-bg($btnInfoBg, $btnInfoBgHover, $btnInfoColor); }
89
+ a.romo-btn.romo-btn-success, button.romo-btn.romo-btn-success, .romo-btn.romo-btn-success { @include button-bg($btnSuccessBg, $btnSuccessBgHover, $btnSuccessColor); }
90
+
91
+ /* explicit colored buttons */
92
+
93
+ a.romo-btn.romo-btn-dark-red, button.romo-btn.romo-btn-dark-red, .romo-btn.romo-btn-dark-red { @include button-bg($btnDarkRedBg, $btnDarkRedBgHover, $btnDarkRedColor); }
94
+ a.romo-btn.romo-btn-red, button.romo-btn.romo-btn-red, .romo-btn.romo-btn-red { @include button-bg($btnRedBg, $btnRedBgHover, $btnRedColor); }
95
+ a.romo-btn.romo-btn-light-red, button.romo-btn.romo-btn-light-red, .romo-btn.romo-btn-light-red { @include button-bg($btnLightRedBg, $btnLightRedBgHover, $btnLightRedColor); }
96
+ a.romo-btn.romo-btn-pastel-red, button.romo-btn.romo-btn-pastel-red, .romo-btn.romo-btn-pastel-red { @include button-bg($btnPastelRedBg, $btnPastelRedBgHover, $btnPastelRedColor); }
97
+ a.romo-btn.romo-btn-dark-orange, button.romo-btn.romo-btn-dark-orange, .romo-btn.romo-btn-dark-orange { @include button-bg($btnDarkOrangeBg, $btnDarkOrangeBgHover, $btnDarkOrangeColor); }
98
+ a.romo-btn.romo-btn-orange, button.romo-btn.romo-btn-orange, .romo-btn.romo-btn-orange { @include button-bg($btnOrangeBg, $btnOrangeBgHover, $btnOrangeColor); }
99
+ a.romo-btn.romo-btn-yellow, button.romo-btn.romo-btn-yellow, .romo-btn.romo-btn-yellow { @include button-bg($btnYellowBg, $btnYellowBgHover, $btnYellowColor); }
100
+ a.romo-btn.romo-btn-pastel-yellow, button.romo-btn.romo-btn-pastel-yellow, .romo-btn.romo-btn-pastel-yellow { @include button-bg($btnPastelYellowBg, $btnPastelYellowBgHover, $btnPastelYellowColor); }
101
+ a.romo-btn.romo-btn-purple, button.romo-btn.romo-btn-purple, .romo-btn.romo-btn-purple { @include button-bg($btnPurpleBg, $btnPurpleBgHover, $btnPurpleColor); }
102
+ a.romo-btn.romo-btn-light-purple, button.romo-btn.romo-btn-light-purple, .romo-btn.romo-btn-light-purple { @include button-bg($btnLightPurpleBg, $btnLightPurpleBgHover, $btnLightPurpleColor); }
103
+ a.romo-btn.romo-btn-dark-pink, button.romo-btn.romo-btn-dark-pink, .romo-btn.romo-btn-dark-pink { @include button-bg($btnDarkPinkBg, $btnDarkPinkBgHover, $btnDarkPinkColor); }
104
+ a.romo-btn.romo-btn-hot-pink, button.romo-btn.romo-btn-hot-pink, .romo-btn.romo-btn-hot-pink { @include button-bg($btnHotPinkBg, $btnHotPinkBgHover, $btnHotPinkColor); }
105
+ a.romo-btn.romo-btn-pink, button.romo-btn.romo-btn-pink, .romo-btn.romo-btn-pink { @include button-bg($btnPinkBg, $btnPinkBgHover, $btnPinkColor); }
106
+ a.romo-btn.romo-btn-dark-green, button.romo-btn.romo-btn-dark-green, .romo-btn.romo-btn-dark-green { @include button-bg($btnDarkGreenBg, $btnDarkGreenBgHover, $btnDarkGreenColor); }
107
+ a.romo-btn.romo-btn-green, button.romo-btn.romo-btn-green, .romo-btn.romo-btn-green { @include button-bg($btnGreenBg, $btnGreenBgHover, $btnGreenColor); }
108
+ a.romo-btn.romo-btn-light-green, button.romo-btn.romo-btn-light-green, .romo-btn.romo-btn-light-green { @include button-bg($btnLightGreenBg, $btnLightGreenBgHover, $btnLightGreenColor); }
109
+ a.romo-btn.romo-btn-pastel-green, button.romo-btn.romo-btn-pastel-green, .romo-btn.romo-btn-pastel-green { @include button-bg($btnPastelGreenBg, $btnPastelGreenBgHover, $btnPastelGreenColor); }
110
+ a.romo-btn.romo-btn-navy, button.romo-btn.romo-btn-navy, .romo-btn.romo-btn-navy { @include button-bg($btnNavyBg, $btnNavyBgHover, $btnNavyColor); }
111
+ a.romo-btn.romo-btn-dark-blue, button.romo-btn.romo-btn-dark-blue, .romo-btn.romo-btn-dark-blue { @include button-bg($btnDarkBlueBg, $btnDarkBlueBgHover, $btnDarkBlueColor); }
112
+ a.romo-btn.romo-btn-blue, button.romo-btn.romo-btn-blue, .romo-btn.romo-btn-blue { @include button-bg($btnBlueBg, $btnBlueBgHover, $btnBlueColor); }
113
+ a.romo-btn.romo-btn-light-blue, button.romo-btn.romo-btn-light-blue, .romo-btn.romo-btn-light-blue { @include button-bg($btnLightBlueBg, $btnLightBlueBgHover, $btnLightBlueColor); }
114
+ a.romo-btn.romo-btn-pastel-blue, button.romo-btn.romo-btn-pastel-blue, .romo-btn.romo-btn-pastel-blue { @include button-bg($btnPastelBlueBg, $btnPastelBlueBgHover, $btnPastelBlueColor); }
115
+
116
+ /* link buttons */
117
+
118
+ a.romo-btn.romo-btn-link, button.romo-btn.romo-btn-link, .romo-btn.romo-btn-link,
119
+ a.romo-btn.romo-btn-link.active, button.romo-btn.romo-btn-link.active, .romo-btn.romo-btn-link.active,
120
+ a.romo-btn.romo-btn-link:active, button.romo-btn.romo-btn-link:active, .romo-btn.romo-btn-link:active,
121
+ a.romo-btn.romo-btn-link.disabled, button.romo-btn.romo-btn-link.disabled, .romo-btn.romo-btn-link.disabled,
122
+ a.romo-btn.romo-btn-link[disabled], button.romo-btn.romo-btn-link[disabled], .romo-btn.romo-btn-link[disabled] {
122
123
  background-color: transparent;
123
124
  background-image: none;
124
125
  @include box-shadow(none);
125
126
  }
126
127
 
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 {
128
+ a.romo-btn.romo-btn-link, button.romo-btn.romo-btn-link { color: $linkColor; }
129
+
130
+ a.romo-btn.romo-btn-link:hover, button.romo-btn.romo-btn-link:hover,
131
+ a.romo-btn.romo-btn-link:focus, button.romo-btn.romo-btn-link:focus {
133
132
  color: $linkColorHover;
134
133
  text-decoration: underline;
135
134
  background-color: transparent;
136
135
  }
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; }
136
+
137
+ a.romo-btn.romo-btn-link.disabled, button.romo-btn.romo-btn-link.disabled, .romo-btn.romo-btn-link.disabled,
138
+ a.romo-btn.romo-btn-link.disabled:hover, button.romo-btn.romo-btn-link.disabled:hover, .romo-btn.romo-btn-link.disabled:hover,
139
+ a.romo-btn.romo-btn-link.disabled:focus, button.romo-btn.romo-btn-link.disabled:focus, .romo-btn.romo-btn-link.disabled:focus,
140
+ a.romo-btn.romo-btn-link[disabled], button.romo-btn.romo-btn-link[disabled], .romo-btn.romo-btn-link[disabled],
141
+ a.romo-btn.romo-btn-link[disabled]:hover, button.romo-btn.romo-btn-link[disabled]:hover, .romo-btn.romo-btn-link[disabled]:hover,
142
+ a.romo-btn.romo-btn-link[disabled]:focus, button.romo-btn.romo-btn-link[disabled]:focus, .romo-btn.romo-btn-link[disabled]:focus {
143
+ color: $disabledColor;
144
+ }
155
145
 
156
146
  .romo-btn-group { @include display-inline-flex(!important); }
157
147
  .romo-btn-group > * { display: inherit; }
@@ -168,8 +158,8 @@ button.romo-btn.romo-btn-link[disabled]:focus,
168
158
  .romo-btn-group.romo-btn-group-border0-radius .romo-btn:last-child { @include border0-top-right-radius; @include border0-bottom-right-radius; }
169
159
  .romo-btn-group.romo-btn-group-border2-radius .romo-btn:last-child { @include border2-top-right-radius; @include border2-bottom-right-radius; }
170
160
 
171
- .romo-btn-group-vertical { display: inline-block; }
172
- .romo-btn-group-vertical .romo-btn { display: block; max-width: 100%; }
161
+ .romo-btn-group-vertical { display: inline-block; }
162
+ .romo-btn-group-vertical .romo-btn { display: block; max-width: 100%; }
173
163
  .romo-btn-group-vertical .romo-btn:not(:last-child) { @include rm-border-bottom; }
174
164
 
175
165
  .romo-btn-group-vertical.romo-btn-group-border-radius .romo-btn:first-child,
@@ -183,7 +173,7 @@ button.romo-btn.romo-btn-link[disabled]:focus,
183
173
  .romo-btn-group-vertical.romo-btn-group-border2-radius .romo-btn:last-child { @include border2-bottom-left-radius; @include border2-bottom-right-radius; }
184
174
 
185
175
  .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; }
176
+ .romo-btn-group .romo-btn-group-vertical:last-child .romo-btn { @include border1-right; }
187
177
 
188
178
  .romo-btn-group.romo-btn-group-border-radius .romo-btn-group-vertical .romo-btn,
189
179
  .romo-btn-group.romo-btn-group-border1-radius .romo-btn-group-vertical .romo-btn { @include rm-border-radius; }