mindy 0.1.2.1 → 0.1.3

Sign up to get free protection for your applications and to get access to all the features.
File without changes
@@ -0,0 +1,528 @@
1
+ @import "compass/css3";
2
+
3
+ $buttonGroupMarginLeft: 15px;
4
+
5
+ $buttonBorderRadius: 2px !default;
6
+
7
+ @mixin button-generate-colors($background-color, $text-color, $inverse: false) {
8
+ @if $inverse == true {
9
+ @include text-shadow(saturate(shade($background-color, 20%), 5%) 0 1px 0);
10
+ } @else {
11
+ @include text-shadow(desaturate(tint($background-color, 25%), 5%) 0 1px 0);
12
+ }
13
+
14
+ @include transition();
15
+ @include transition-duration(0.5s);
16
+
17
+ $button-dark-color: shade($background-color, 15%);
18
+ $button-border-color: shade($background-color, 10%);
19
+ $button-dark-border-color: shade($background-color, 16%);
20
+ $button-light-border-color: lighten($background-color, 8%);
21
+ $button-light-color: saturate(tint($background-color, 25%), 15%);
22
+
23
+ background-color: $background-color;
24
+ border-color: $button-border-color;
25
+ border-bottom-color: $button-dark-border-color;
26
+ color: $text-color;
27
+
28
+ @include gradient($button-light-color, $background-color);
29
+
30
+ $button-highlight-color: transparentize(desaturate(tint(desaturate(tint($background-color, 60%), 5%), 15%), 5%), 0%);
31
+ $button-shadow-color: saturate(shade($background-color, 2%), 5%);
32
+ $dark-background-color: shade(#fff, 15%);
33
+ @include box-shadow(desaturate(tint($button-light-color, 10%), 5%) 0 2px 1px 0 inset);
34
+
35
+ @include button-back($background-color, $button-border-color);
36
+ @include button-next($background-color, $button-border-color);
37
+ @include button-statuses($background-color, $button-border-color);
38
+ }
39
+
40
+ // button
41
+ @mixin button($background-color, $text-color, $button: true, $inverse: false) {
42
+ @include button-fixes;
43
+ @include button-additional-classes;
44
+
45
+ @include border-radius($buttonBorderRadius);
46
+ @include inline-block;
47
+
48
+ border: 1px solid #000;
49
+ padding: 4px 14px 4px 14px;
50
+ position: relative;
51
+ cursor: pointer;
52
+
53
+ //@if $button == true {
54
+ line-height: 18px;
55
+ //} @else {
56
+ // line-height: 17px;
57
+ //}
58
+
59
+ @include button-generate-colors($background-color, $text-color, $inverse);
60
+ }
61
+
62
+ .button-container {
63
+ &.open {
64
+ *z-index: 1000;
65
+
66
+ .dropdown-menu {
67
+ display: block;
68
+ margin-top: 1px;
69
+ }
70
+
71
+ .dropdown-toggle {
72
+ background-image: none;
73
+ @include single-box-shadow(0, 1px, 6px, rgba(0, 0, 0, 0.15), inset);
74
+ }
75
+ }
76
+
77
+ .button, .button-group {
78
+ vertical-align: top;
79
+ }
80
+ }
81
+
82
+ .button + .button,
83
+ .button + .button-group,
84
+ .button-group + .button,
85
+ .button-group + .button-group {
86
+ margin-left: $buttonGroupMarginLeft;
87
+ }
88
+
89
+ @mixin button-group() {
90
+ position: relative;
91
+ display: inline-block;
92
+ list-style: none;
93
+ padding: 0;
94
+ margin: 0;
95
+
96
+ zoom: 1;
97
+ *display: inline;
98
+
99
+ .button {
100
+ position: relative;
101
+ float: left;
102
+ margin-left: -1px;
103
+ }
104
+
105
+ .button + .button {
106
+ @include border-radius(0);
107
+
108
+ &:first-child, &.dropdown-toggle {
109
+ @include border-radius($buttonBorderRadius 0 0 $buttonBorderRadius);
110
+ }
111
+
112
+ &:last-child, &.dropdown-toggle {
113
+ @include border-radius(0 $buttonBorderRadius $buttonBorderRadius 0);
114
+ }
115
+ }
116
+ }
117
+
118
+ .button-group {
119
+ @include button-group;
120
+ }
121
+
122
+ .dropdown {
123
+ position: relative;
124
+ }
125
+ .dropdown-toggle {
126
+ *margin-bottom: -3px;
127
+ }
128
+ .dropdown-toggle:active, .open .dropdown-toggle {
129
+ outline: 0;
130
+ }
131
+ .caret {
132
+ display: inline-block;
133
+ width: 0;
134
+ height: 0;
135
+ text-indent: -99999px;
136
+ *text-indent: 0;
137
+ vertical-align: top;
138
+ border-left: 4px solid transparent;
139
+ border-right: 4px solid transparent;
140
+ border-top: 4px solid black;
141
+ opacity: 0.5;
142
+ filter: alpha(opacity=50);
143
+ content: "\2193";
144
+ }
145
+ .dropdown .caret {
146
+ margin-top: 8px;
147
+ margin-left: 2px;
148
+ }
149
+ .dropdown:hover .caret, .open.dropdown .caret {
150
+ opacity: 1;
151
+ filter: alpha(opacity=100);
152
+ }
153
+ .dropdown-menu {
154
+ position: absolute;
155
+ top: 100%;
156
+ left: 0;
157
+ z-index: 1000;
158
+ float: left;
159
+ display: none;
160
+ min-width: 245px;
161
+ max-width: 245px;
162
+ padding: 0;
163
+ margin: 2px 0 0 0;
164
+ list-style: none;
165
+ background-color: #fff;
166
+ border: 1px solid rgba(0, 0, 0, 0.2);
167
+ @include box-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
168
+
169
+ &.bottom {
170
+ top: auto;
171
+ bottom: 100%;
172
+ margin-bottom: 2px;
173
+ }
174
+
175
+ &.right {
176
+ right: 0;
177
+ top: 100%;
178
+ left: auto;
179
+ }
180
+
181
+ &.left {
182
+
183
+ }
184
+
185
+ .divider {
186
+ border-top: 1px solid #ebebeb;
187
+ margin-top: 9px;
188
+ margin-bottom: 10px;
189
+ padding: 0;
190
+ cursor: default;
191
+ /* height: 1px;
192
+ margin: 5px 1px;
193
+ overflow: hidden;
194
+ background-color: #e5e5e5;
195
+ border-bottom: 1px solid white;
196
+
197
+ // IE7 needs a set width since we gave a height. Restricting just
198
+ // to IE7 to keep the 1px left/right space in other browsers.
199
+ // It is unclear where IE is getting the extra space that we need
200
+ // to negative-margin away, but so it goes.
201
+ *width: 100%;
202
+ *margin: -5px 0 5px;*/
203
+
204
+ }
205
+ }
206
+
207
+ .dropdown-menu a {
208
+ position: relative;
209
+ padding: 6px 0 6px 30px;
210
+ color: #333;
211
+ text-decoration: none;
212
+ display: block;
213
+ clear: both;
214
+ font-weight: normal;
215
+ line-height: 18px;
216
+ white-space: nowrap;
217
+
218
+ [class^="icon-"] {
219
+ position: absolute;
220
+ left: 7px;
221
+ top: 6px;
222
+ }
223
+ }
224
+
225
+ .dropdown-menu li > a:hover, .dropdown-menu .active > a, .dropdown-menu .active > a:hover {
226
+ text-decoration: none;
227
+ background-color: #eee;
228
+ }
229
+
230
+ .dropdown {
231
+ &.open {
232
+ *z-index: 1000;
233
+
234
+ .dropdown-toggle {
235
+ //@TODO: ruby pre && compass pre required !optional refactor me
236
+ //@extend .button.checked;
237
+
238
+ //color: #08c;
239
+ //background: #ccc;
240
+ //background: rgba(0, 0, 0, 0.3);
241
+ }
242
+
243
+ .dropdown-menu {
244
+ display: block;
245
+ }
246
+ }
247
+ }
248
+
249
+ .button-container .button, .button-container .button-group {
250
+ vertical-align: top;
251
+ }
252
+ .button-group{
253
+ .open {
254
+ *z-index: 1000;
255
+
256
+ .dropdown-menu {
257
+ display: block;
258
+ margin-top: 1px;
259
+ }
260
+
261
+ .dropdown-toggle {
262
+ background-image: none;
263
+ @include box-shadow(0 1px 6px rgba(0, 0, 0, 0.15) inset);
264
+ //-webkit-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15);
265
+ //-moz-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15);
266
+ //box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15);
267
+ }
268
+ }
269
+ }
270
+
271
+ @mixin button-disabled {
272
+ //&[disabled], &.disabled {
273
+ color: #B8B8B8;
274
+ border: 1px solid rgba(0, 0, 0, 0.05);
275
+ background-color: #fff;
276
+ cursor: default;
277
+
278
+ &:hover, &:active {
279
+ color: #b8b8b8;
280
+ text-shadow: none;
281
+ background-color: #fff;
282
+ border: 1px solid rgba(0, 0, 0, 0.05);
283
+ @include single-box-shadow(none);
284
+ }
285
+ //}
286
+ }
287
+
288
+ @mixin button-disabled2 {
289
+ color: #b8b8b8;
290
+ cursor: default;
291
+ border: 1px solid #dcdcdc;
292
+
293
+ &:hover {
294
+ border: 1px solid #dcdcdc;
295
+ @include single-box-shadow(none);
296
+ }
297
+ }
298
+
299
+ @mixin button-additional-classes {
300
+ &.pill {
301
+ @include border-radius(20px);
302
+ }
303
+
304
+ &.sm {
305
+ font-size: 11px;
306
+ }
307
+
308
+ //@include button-disabled;
309
+ //@include button-disabled2;
310
+
311
+ & [class^="icon-"], & [class*=" icon-"] {
312
+ height: 18px;
313
+ }
314
+
315
+ @include button-small;
316
+
317
+ &.dropdown-toggle {
318
+ min-width: 5px;
319
+ //height: 12px;
320
+ //padding: 8px;
321
+ }
322
+
323
+ .caret {
324
+ margin-left: 0;
325
+ margin-top: 6px;
326
+ }
327
+
328
+ &:hover .caret {
329
+ opacity: 1;
330
+ }
331
+
332
+ .no-text {
333
+ min-width: 14px;
334
+ }
335
+
336
+ .xs-no-text {
337
+ height: 9px;
338
+ width: 18px;
339
+ font-size: 10px;
340
+ font-weight: bold;
341
+ line-height: 10px;
342
+ padding: 4px 2px;
343
+ min-width: 5px;
344
+ }
345
+ }
346
+
347
+ @mixin button-small {
348
+ &.small, &.mini {
349
+ height: 14px;
350
+ font-size: 11px;
351
+ font-weight: bold;
352
+ line-height: 13px;
353
+ padding: 4px 10px;
354
+
355
+ & [class^="icon-"], & [class*=" icon-"] {
356
+ height: 14px;
357
+ }
358
+ }
359
+ }
360
+
361
+ @mixin button-fixes {
362
+ text-align: center;
363
+ text-decoration: none;
364
+ outline: 0;
365
+ overflow: visible;
366
+ margin: 0;
367
+ vertical-align: top;
368
+ *padding-top: 2px;
369
+ *padding-bottom: 0;
370
+
371
+ font-family: inherit;
372
+ font-size: inherit;
373
+
374
+ &::-moz-focus-inner {
375
+ padding: 0;
376
+ border: 0;
377
+ }
378
+
379
+ &:hover {
380
+ text-decoration: none;
381
+ }
382
+ }
383
+
384
+ @mixin button-next($background-color, $border-color) {
385
+ &.next {
386
+ border-right: none;
387
+ @include button-statuses($background-color, $border-color);
388
+ @include border-radius($buttonBorderRadius 4px 4px $buttonBorderRadius);
389
+
390
+ &:before, &:after {
391
+ border-right: 1px solid $border-color;
392
+ right: -4px;
393
+
394
+ content: '';
395
+ position: absolute;
396
+ width: 15px;
397
+ }
398
+
399
+ &:before {
400
+ height: 50%;
401
+ top: 1px;
402
+ right: -5px;
403
+
404
+ @include transform(skew(35deg, 0));
405
+ $background-first-color: desaturate(tint($background-color, 28%), 5%);
406
+ $background-last-color: desaturate(tint($background-color, 20%), 5%);
407
+ @include background-image(linear-gradient(color-stops($background-first-color, $background-last-color)));
408
+ }
409
+
410
+ &:after {
411
+ height: 48%;
412
+ right: -5px;
413
+ bottom: 1px;
414
+
415
+ @include transform(skew(-35deg, 0));
416
+ @include box-shadow(2px 1px 2px rgba(100,100,100,0.1));
417
+ $background-first-color: desaturate(tint($background-color, 20%), 5%);
418
+ @include background-image(linear-gradient(color-stops($background-first-color, $background-color)));
419
+ }
420
+
421
+ @include button-statuses($background-color, $border-color);
422
+ }
423
+ }
424
+
425
+ @mixin button-back($background-color, $border-color) {
426
+ &.back {
427
+ border-left: none;
428
+ @include button-statuses($background-color, $border-color);
429
+ @include border-radius(4px $buttonBorderRadius $buttonBorderRadius 4px);
430
+
431
+ &:before, &:after {
432
+ content: '';
433
+ position: absolute;
434
+ width: 15px;
435
+ border-left: 1px solid $border-color;
436
+ left: -4px;
437
+ }
438
+
439
+ &:before {
440
+ height: 48%;
441
+ bottom: 1px;
442
+ left: -5px;
443
+
444
+ @include transform(skew(35deg, 0));
445
+ @include box-shadow(-2px 1px 2px rgba(100,100,100,0.1));
446
+
447
+ $background-first-color: desaturate(tint($background-color, 20%), 5%);
448
+ @include background-image(linear-gradient(color-stops($background-first-color, $background-color)));
449
+ }
450
+
451
+ &:after {
452
+ height: 50%;
453
+ left: -5px;
454
+ top: 1px;
455
+
456
+ @include transform(skew(-35deg, 0));
457
+ $background-first-color: desaturate(tint($background-color, 28%), 5%);
458
+ $background-last-color: desaturate(tint($background-color, 20%), 5%);
459
+ @include background-image(linear-gradient(color-stops($background-first-color, $background-last-color)));
460
+ }
461
+
462
+ /*
463
+ &:hover:before, &:hover:after {
464
+ $dark-background-color: shade($background-color, 35%);
465
+ $button-shadow-color: saturate(shade($background-color, 2%), 5%);
466
+ $button-light-color: desaturate(tint($background-color, 12%), 5%);
467
+ $button-highlight-color: transparentize(desaturate(tint($button-light-color, 15%), 5%), 0%);
468
+
469
+ background: tint($background-color, 5%);
470
+
471
+ @include background-image(linear-gradient(color-stops(lighten(tint($button-light-color, 3%), 1%), tint($background-color, 3%))));
472
+ }
473
+
474
+ &:active:before, &:active:after, &.active:before, &.active:after, &.checked:before, &.checked:after {
475
+ $border-top-color: shade($background-color, 10%);
476
+ $border-bottom-color: shade($background-color, 16%);
477
+
478
+ background-color: $background-color;
479
+ border-top-color: $border-top-color;
480
+ border-bottom-color: $border-bottom-color;
481
+
482
+ @include background-image(linear-gradient(color-stops(desaturate(tint($background-color, 12%), 5%), $background-color)));
483
+ @include box-shadow(shade($background-color, 10%) 0 1px 8px 0 inset);
484
+ }
485
+ */
486
+ }
487
+ }
488
+
489
+ @mixin button-statuses($background-color, $border-color) {
490
+ &:hover {
491
+ @include transition();
492
+ @include transition-duration(0.2s);
493
+
494
+ $dark-background-color: shade($background-color, 35%);
495
+ $button-shadow-color: saturate(shade($background-color, 2%), 5%);
496
+ $button-light-color: desaturate(tint($background-color, 12%), 5%);
497
+ $button-highlight-color: transparentize(desaturate(tint($button-light-color, 15%), 5%), 0%);
498
+
499
+ background: tint($background-color, 5%);
500
+
501
+ @include background-image(linear-gradient(color-stops(lighten(tint($button-light-color, 3%), 1%), tint($background-color, 3%))));
502
+ @include box-shadow(
503
+ lighten($dark-background-color,15%) 0 1px 1px 0,
504
+ tint($button-shadow-color, 1%) 0 -2px 2px 0 inset,
505
+ tint($button-highlight-color, 3%) 0 2px 3px 0 inset
506
+ );
507
+ }
508
+
509
+ &:active, &.active, &.checked {
510
+ @include transition();
511
+ @include transition-duration(0.5s);
512
+
513
+ $border-top-color: shade($background-color, 10%);
514
+ $border-bottom-color: shade($background-color, 16%);
515
+
516
+ background-color: $background-color;
517
+ border-top-color: $border-top-color;
518
+ border-bottom-color: $border-bottom-color;
519
+
520
+ @include background-image(linear-gradient(color-stops(desaturate(tint($background-color, 12%), 5%), $background-color)));
521
+ @include box-shadow(shade($background-color, 10%) 0 1px 8px 0 inset);
522
+ }
523
+
524
+ // font-awesome fix
525
+ [class^="icon-"] {
526
+ height: 17px;
527
+ }
528
+ }