]> git.r.bdr.sh - rbdr/dotfiles/blob - atom/packages/aesthetic-ui/styles/progress.less
Update atoms
[rbdr/dotfiles] / atom / packages / aesthetic-ui / styles / progress.less
1 @import "ui-variables";
2 @import "ui-mixins";
3
4 .loading-spinner(@size) {
5 width: @size;
6 height: @size;
7 display: block;
8
9 background-image: url(images/octocat-spinner-128.gif);
10 background-repeat: no-repeat;
11 background-size: cover;
12
13 &.inline-block {
14 display: inline-block;
15 }
16 }
17
18 .loading-spinner-large {
19 .loading-spinner(64px);
20 }
21
22 .loading-spinner-medium {
23 .loading-spinner(50px);
24 }
25
26 .loading-spinner-small {
27 .loading-spinner(32px);
28 }
29
30 .loading-spinner-tiny {
31 .loading-spinner(20px);
32 }
33
34 // Much learning from:
35 // http://css-tricks.com/html5-progress-element/
36
37 @progress-height: 16px;
38 @progress-shine-gradient: -webkit-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .15));
39
40 progress {
41 height: @progress-height;
42 -webkit-appearance: none;
43 border-radius: @component-border-radius;
44 background-color: #ccc;
45 background-image:
46 -webkit-linear-gradient(-30deg,
47 transparent 33%, rgba(0, 0, 0, .1) 33%,
48 rgba(0,0, 0, .1) 66%, transparent 66%),
49 @progress-shine-gradient;
50 border-radius: 2px;
51 background-size: 25px @progress-height, 100% 100%, 100% 100%;
52 -webkit-animation: animate-stripes 5s linear 6; // stop animation after 6 runs (30s) to limit CPU usage
53 }
54
55 progress::-webkit-progress-bar {
56 background-color: transparent;
57 }
58
59 progress::-webkit-progress-value {
60 border-radius: @component-border-radius;
61 background-image: @progress-shine-gradient;
62 background-color: @background-color-info;
63 }
64
65 progress[value] {
66 background-image: @progress-shine-gradient;
67 -webkit-animation: none;
68 }
69
70 @-webkit-keyframes animate-stripes {
71 100% { background-position: 100px 0px; }
72 }