mindy 0.1.2.1 → 0.1.3
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.
- data/lib/mindy.rb +2 -2
- data/stylesheets/{mindy/_mindy.scss → _mindy.scss} +0 -0
- data/stylesheets/css3/_animate.scss +635 -0
- data/stylesheets/{mindy/css3 → css3}/_arrows.scss +0 -0
- data/stylesheets/css3/_buttons.scss +528 -0
- data/stylesheets/{mindy/css3 → css3}/_buttons_refactor.scss +0 -0
- data/stylesheets/{mindy/css3 → css3}/_font-family.scss +0 -0
- data/stylesheets/{mindy/css3 → css3}/_formalize.scss +0 -0
- data/stylesheets/{mindy/css3 → css3}/_multi_line_buttons.sass +0 -0
- data/stylesheets/{mindy/css3 → css3}/_shadow.scss +0 -0
- data/stylesheets/{mindy/grid → grid}/_grid.scss +2 -2
- data/stylesheets/{mindy/grid → grid}/_respond.scss +0 -0
- data/stylesheets/{mindy/utils → utils}/_deprecated.scss +0 -0
- data/stylesheets/{mindy/utils → utils}/_mixins.scss +23 -0
- data/stylesheets/{mindy/utils → utils}/_reset.scss +4 -4
- data/stylesheets/{mindy/utils → utils}/_variables.scss +0 -0
- metadata +18 -19
- data/stylesheets/mindy/css3/_animate.scss +0 -2557
- data/stylesheets/mindy/css3/_buttons.scss +0 -453
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
|
+
}
|