Project

General

Profile

1
/* buttons */
2

    
3
@fab_large_size:            64px;
4
@fab_small_size:            48px;
5
@fab_transition_delay:      50ms;
6

    
7
.md-btn {
8
    background: @white;
9
    border: none;
10
    border-radius: 2px;
11
    .boxShadowHelper(1);
12
    min-height: 31px;
13
    min-width: 70px;
14
    padding: 2px 16px;
15
    text-align: center;
16
    text-shadow: none;
17
    text-transform: uppercase;
18
    transition: all 280ms @md_easing;
19
    color: @text_primary_color;
20
    box-sizing: border-box;
21
    cursor: pointer;
22
    -webkit-appearance: none;
23
    display: inline-block;
24
    vertical-align: middle;
25
    .md_font(500, 14px, 31px) !important;
26
    &:hover,
27
    &:focus,
28
    &:active,
29
    .uk-button-dropdown.uk-open > & {
30
        background: @white;
31
        outline: none;
32
        text-decoration: none;
33
        color: @text_primary_color;
34
        .boxShadowHelper(2);
35
    }
36
    &:active,
37
    .uk-button-dropdown.uk-open > & {
38
        .boxShadowHelper(3);
39
    }
40
    &-flat {
41
        .boxShadowHelper(0);
42
        background: none;
43
        &:hover,
44
        &:focus {
45
            background: @hover_btn;
46
        }
47
        &:active {
48
            background: @active_btn;
49
        }
50
        &-danger {
51
            &,
52
            &:hover,
53
            &:focus,
54
            &:active {
55
                color: @danger_color;
56
            }
57
            &:hover,
58
            &:focus,
59
            &:active {
60
                background: lighten(@danger_color,40%);
61
            }
62
        }
63
        &-primary {
64
            &,
65
            &:hover,
66
            &:focus,
67
            &:active {
68
                color: @primary_color_dark;
69
            }
70
            &:hover,
71
            &:focus,
72
            &:active {
73
                background: lighten(@primary_color,40%);
74
            }
75
        }
76
        &-success {
77
            &,
78
            &:hover,
79
            &:focus,
80
            &:active {
81
                color: @success_color;
82
            }
83
            &:hover,
84
            &:focus,
85
            &:active {
86
                background: lighten(@success_color,40%);
87
            }
88
        }
89
        &-warning {
90
            &,
91
            &:hover,
92
            &:focus,
93
            &:active {
94
                color: @warning_color;
95
            }
96
            &:hover,
97
            &:focus,
98
            &:active {
99
                background: lighten(@warning_color,40%);
100
            }
101
        }
102
        &.disabled {
103
            background: none !important;
104
        }
105
    }
106
    &-danger {
107
        &,
108
        &:hover,
109
        &:focus,
110
        &:active {
111
            background: @danger_color;
112
        }
113
    }
114
    &-primary {
115
        &,
116
        &:hover,
117
        &:focus,
118
        &:active {
119
            background: @primary_color;
120
        }
121
    }
122
    &-success {
123
        &,
124
        &:hover,
125
        &:focus,
126
        &:active {
127
            background: @success_color;
128
        }
129
    }
130
    &-warning {
131
        &,
132
        &:hover,
133
        &:focus,
134
        &:active {
135
            background: @warning_color;
136
        }
137
    }
138
    &-danger,
139
    &-primary,
140
    &-success,
141
    &-warning {
142
        &,
143
        &:hover,
144
        &:focus,
145
        &:active,
146
        > i {
147
            color: @white;
148
        }
149
    }
150
    &.disabled {
151
        &,
152
        &:hover,
153
        &:focus,
154
        &:active {
155
            color: #a8a8a8;
156
            background: #eaeaea;
157
            box-shadow: none !important;
158
            cursor: default;
159
            pointer-events: none;
160
        }
161
    }
162
    > i {
163
        &.material-icons {
164
            margin-top: 5px;
165
            font-size: 18px;
166
        }
167
    }
168
    &-mini {
169
        line-height: 21px !important;
170
        min-width: 12px;
171
        font-size: 10px !important;
172
        min-height: 24px;
173
    }
174
    &-small {
175
        line-height: 27px !important;
176
        min-width: 14px;
177
        font-size: 11px !important;
178
    }
179
    &-large {
180
        line-height: 42px !important;
181
        font-size: 16px !important;
182
    }
183
    &::-moz-focus-inner {
184
        border: 0;
185
        padding: 0;
186
    }
187
    + .md-btn {
188
        margin-left: 8px;
189
    }
190
    &-block {
191
        width: 100%;
192
        & + & {
193
            margin-left: 0;
194
            margin-top: 12px;
195
        }
196
    }
197
    + .md-btn-group {
198
        margin-left: 16px;
199
    }
200
    &-facebook {
201
        background: #3b5998 !important;
202
    }
203
    &-twitter {
204
        background: #00aced !important;
205
    }
206
    &-gplus {
207
        background: #dd4b39 !important;
208
    }
209
    &-facebook,
210
    &-twitter,
211
    &-gplus {
212
        &,
213
        > i {
214
            color: @white !important;
215
        }
216
    }
217
    &-icon {
218
        &:extend(.md-btn-icon-default);
219
        > i {
220
            &:extend(.md-btn-icon-default > i);
221
            &.no_margin {
222
                margin-right: 0 !important;
223
                margin-left: 0 !important;
224
            }
225
        }
226
        &.md-btn-large {
227
            &:extend(.md-btn-icon-large);
228
            > i {
229
                &:extend(.md-btn-icon-large > i);
230
            }
231
        }
232
        &.md-btn-small {
233
            &:extend(.md-btn-icon-small);
234
            > i {
235
                &:extend(.md-btn-icon-small > i);
236
            }
237
        }
238
        &.md-btn-mini {
239
            &:extend(.md-btn-icon-mini);
240
            > i {
241
                &:extend(.md-btn-icon-mini > i);
242
            }
243
        }
244
    }
245
}
246
.md-btn-icon-large {
247
    min-width: 72px;
248
    > i {
249
        font-size: 24px;
250
        margin-right: 12px;
251
        vertical-align: -3px;
252
    }
253
}
254
.md-btn-icon-default {
255
    min-width: 64px;
256
    > i {
257
        font-size: 18px;
258
        margin-right: 8px;
259
        vertical-align: -2px;
260
    }
261
}
262
.md-btn-icon-small {
263
    min-width: 48px;
264
    > i {
265
        font-size: 16px;
266
        margin-right: 6px;
267
        vertical-align: -2px;
268
    }
269
}
270
.md-btn-icon-mini {
271
    min-width: 36px;
272
    > i {
273
        font-size: 16px;
274
        margin-right: 4px;
275
        vertical-align: -2px;
276
    }
277
}
278

    
279
.md-fab {
280
    box-sizing: border-box;
281
    width: @fab_large_size;
282
    height: @fab_large_size;
283
    border-radius: 50%;
284
    background: @white;
285
    color: @text_secondary_color;
286
    display: block;
287
    .boxShadowHelper(1);
288
    transition: box-shadow 280ms @md_easing;
289
    border: none;
290
    position: relative;
291
    text-align: center;
292
    cursor: pointer;
293
    &:hover,
294
    &:focus,
295
    &:active {
296
        .boxShadowHelper(3);
297
    }
298
    > i {
299
        font-size: 36px;
300
        line-height: @fab_large_size;
301
        height: inherit;
302
        width: inherit;
303
        position: absolute;
304
        left: 0;
305
        top: 0;
306
        color: @text_secondary_color;
307
    }
308
    &.md-fab-accent {
309
        background: @accent_color;
310
        > i {
311
            color: @white;
312
        }
313
    }
314
    &.md-fab-success {
315
        background: @success_color;
316
        > i {
317
            color: @white;
318
        }
319
    }
320
    &.md-fab-danger {
321
        background: @danger_color;
322
        > i {
323
            color: @white;
324
        }
325
    }
326
    &.md-fab-primary {
327
        background: @primary_color;
328
        > i {
329
            color: @white;
330
        }
331
    }
332
    &.md-fab-warning {
333
        background: @warning_color;
334
        > i {
335
            color: @white;
336
        }
337
    }
338
    &.md-fab-small {
339
        width: @fab_small_size;
340
        height: @fab_small_size;
341
        border-radius: 50%;
342
        > i {
343
            line-height: @fab_small_size;
344
            height: inherit;
345
            width: inherit;
346
            font-size: 24px;
347
        }
348
    }
349
    &-speed-dial {
350
        .md-fab-action-close {
351
            display: none;
352
        }
353
    }
354
}
355
.md-fab-wrapper {
356
    position: fixed;
357
    bottom: 24px;
358
    right: 24px;
359
    z-index: 1004;
360
    transition: margin 280ms @md_easing;
361
    @media @screen_medium_max {
362
        bottom: 20px;
363
        right: 20px;
364
    }
365
    > .md-fab + .md-fab {
366
        margin-top: 16px;
367
    }
368
    &.md-fab-in-card {
369
        position: absolute;
370
    }
371
}
372

    
373
.md-fab-speed-dial {
374
    .md-fab-wrapper-small {
375
        position: absolute;
376
        bottom: @fab_large_size + 16px;
377
        right: 8px;
378
        min-height: @fab_small_size;
379
        width: @fab_small_size;
380
        z-index: -1;
381
        .md-fab-small {
382
            transform: scale(0);
383
            opacity: 0;
384
            position: absolute;
385
            right: 0;
386
            &:nth-child(1) {
387
                transition: box-shadow 280ms @md_easing,transform 100ms @md_easing @fab_transition_delay,opacity 100ms @md_easing @fab_transition_delay;
388
            }
389
            .generate-fab-child(@n, @i: 2) when (@i =< @n) {
390
                // small buttons position
391
                &:nth-last-child(@{i}) {
392
                    bottom: (@fab_small_size * (@i - 1) ) + (16px * (@i - 1) );
393
                }
394
                // transition for small buttons (on hide)
395
                &:nth-child(@{i}) {
396
                    transition: box-shadow 280ms @md_easing,transform 100ms @md_easing ( @fab_transition_delay * @i ),opacity 100ms @md_easing ( @fab_transition_delay * @i );
397
                }
398
                .generate-fab-child(@n, (@i + 1));
399
            }
400
            .generate-fab-child(8);
401
        }
402
    }
403
    &.md-fab-active {
404
        .md-fab-small {
405
            transform: scale(1);
406
            opacity: 1;
407
            z-index: 10;
408

    
409
            // transition for small buttons (on show)
410
            &:nth-last-child(1) {
411
                transition: box-shadow 280ms @md_easing,transform 100ms @md_easing @fab_transition_delay,opacity 100ms @md_easing @fab_transition_delay;
412
            }
413
            .generate-fab-child-active(@n, @i: 2) when (@i =< @n) {
414
                &:nth-last-child(@{i}) {
415
                    transition: box-shadow 280ms @md_easing,transform 100ms @md_easing ( @fab_transition_delay * @i ),opacity 100ms @md_easing ( @fab_transition_delay * @i );
416
                }
417
                .generate-fab-child-active(@n, (@i + 1));
418
            }
419
            .generate-fab-child-active(8);
420
        }
421
    }
422
}
423

    
424
.md-fab-toolbar {
425
    transition: all 280ms @md_easing;
426
    cursor: default;
427
    > i {
428
        cursor: pointer;
429
    }
430
    &-actions {
431
        visibility: hidden;
432
        white-space: nowrap;
433
        padding: 0 16px;
434
        overflow: hidden;
435
        box-sizing: border-box;
436
        > a,
437
        > button {
438
            display: block;
439
            float: left;
440
            opacity: 0;
441
            margin: 0 0 0 16px;
442
            height: @fab_large_size;
443
            width: 48px;
444
            box-sizing: border-box;
445
            transition: opacity 280ms @md_easing;
446
            background: none;
447
            border: none;
448
            outline: none;
449
            cursor: pointer;
450
            &:first-child {
451
                margin-left: 0;
452
            }
453
        }
454
        .material-icons {
455
            font-size: 36px;
456
            line-height: @fab_large_size;
457
        }
458
    }
459
    &.md-fab-animated {
460
        .boxShadowHelper(1);
461
        border-radius: 4px;
462
        > i {
463
            display: none;
464
        }
465
    }
466
    &.md-fab-active {
467
        .md-fab-toolbar-actions {
468
            visibility: visible;
469
            > a,
470
            > button {
471
                opacity: 1;
472
            }
473
        }
474
    }
475
    &.md-fab-small {
476
        .md-fab-toolbar-actions {
477
            > a,
478
            > button {
479
                height: @fab_small_size;
480
                width: 36px;
481
                padding: 0;
482
                margin: 0 0 0 8px;
483
                &:first-child {
484
                    margin-left: 0;
485
                }
486
            }
487
            .material-icons {
488
                font-size: 24px;
489
                line-height: @fab_small_size;
490
                height: inherit;
491
            }
492
        }
493
    }
494
}
495

    
496
.md-fab-sheet {
497
    transition: all 280ms @md_easing;
498
    cursor: default;
499
    > i {
500
        cursor: pointer;
501
    }
502
    &-actions {
503
        visibility: hidden;
504
        white-space: nowrap;
505
        overflow: hidden;
506
        box-sizing: border-box;
507
        padding: 4px 0;
508
        > a {
509
            display: block;
510
            opacity: 0;
511
            padding: 4px 16px;
512
            box-sizing: border-box;
513
            .md_font(400, 16px, 32px);
514
            text-align: left;
515
            &,
516
            &:hover {
517
                color: @text_primary_color;
518
            }
519
        }
520
        .material-icons {
521
            font-size: 24px;
522
            margin-right: 8px;
523
            vertical-align: -6px;
524
        }
525
    }
526
    &.md-fab-animated {
527
        .boxShadowHelper(1);
528
        border-radius: 4px;
529
        > i {
530
            display: none;
531
        }
532
    }
533
    &.md-fab-active {
534
        .md-fab-sheet-actions {
535
            visibility: visible;
536
            > a {
537
                opacity: 1;
538
            }
539
        }
540
    }
541
}
542

    
543
.sidebar_secondary_active {
544
    .md-fab-wrapper {
545
        margin-right: @sidebar_secondary_width - 16;
546
        @media @screen_medium_max {
547
            margin-right: @sidebar_secondary_width;
548
        }
549
    }
550
}
551

    
552
.md-toggle-group {
553
    .md-toggle-button {
554
        border-width: 0 0 2px;
555
        border-style: solid;
556
        border-color: transparent;
557
        background: none;
558
        line-height: 30px;
559
        min-width: 42px;
560
        text-align: center;
561
        padding: 0 8px;
562
        vertical-align: middle;
563
        cursor: pointer;
564
        &.md-toggle-active {
565
            border-bottom-color: #212121;
566
        }
567
    }
568
    &.md-toggle-group-small {
569
        .md-toggle-button {
570
            font-size: 11px;
571
            line-height: 24px;
572
            min-width: 16px;
573
            padding: 0 6px;
574
        }
575
    }
576
}
577

    
578
.md-btn-group {
579
    display: inline-block;
580
    vertical-align: top;
581
    position: relative;
582
    font-size: 0;
583
    white-space: nowrap;
584
    .md-btn {
585
        vertical-align: top;
586
        margin-left: 0 !important;
587
        &:first-child {
588
            border-top-right-radius: 0;
589
            border-bottom-right-radius: 0;
590
        }
591
        &:not(:first-child):not(:last-child) {
592
            border-radius: 0;
593
        }
594
        &:last-child {
595
            border-top-left-radius: 0;
596
            border-bottom-left-radius: 0;
597
        }
598
    }
599
}
(1-1/12)