diff options
Diffstat (limited to 'atom/packages/aesthetic-ui/styles/progress.less')
| -rw-r--r-- | atom/packages/aesthetic-ui/styles/progress.less | 72 |
1 files changed, 0 insertions, 72 deletions
diff --git a/atom/packages/aesthetic-ui/styles/progress.less b/atom/packages/aesthetic-ui/styles/progress.less deleted file mode 100644 index 5d78670..0000000 --- a/atom/packages/aesthetic-ui/styles/progress.less +++ /dev/null @@ -1,72 +0,0 @@ -@import "ui-variables"; -@import "ui-mixins"; - -.loading-spinner(@size) { - width: @size; - height: @size; - display: block; - - background-image: url(images/octocat-spinner-128.gif); - background-repeat: no-repeat; - background-size: cover; - - &.inline-block { - display: inline-block; - } -} - -.loading-spinner-large { - .loading-spinner(64px); -} - -.loading-spinner-medium { - .loading-spinner(50px); -} - -.loading-spinner-small { - .loading-spinner(32px); -} - -.loading-spinner-tiny { - .loading-spinner(20px); -} - -// Much learning from: -// http://css-tricks.com/html5-progress-element/ - -@progress-height: 16px; -@progress-shine-gradient: -webkit-linear-gradient(top, rgba(255, 255, 255, .15), rgba(0, 0, 0, .15)); - -progress { - height: @progress-height; - -webkit-appearance: none; - border-radius: @component-border-radius; - background-color: #ccc; - background-image: - -webkit-linear-gradient(-30deg, - transparent 33%, rgba(0, 0, 0, .1) 33%, - rgba(0,0, 0, .1) 66%, transparent 66%), - @progress-shine-gradient; - border-radius: 2px; - background-size: 25px @progress-height, 100% 100%, 100% 100%; - -webkit-animation: animate-stripes 5s linear 6; // stop animation after 6 runs (30s) to limit CPU usage -} - -progress::-webkit-progress-bar { - background-color: transparent; -} - -progress::-webkit-progress-value { - border-radius: @component-border-radius; - background-image: @progress-shine-gradient; - background-color: @background-color-info; -} - -progress[value] { - background-image: @progress-shine-gradient; - -webkit-animation: none; -} - -@-webkit-keyframes animate-stripes { - 100% { background-position: 100px 0px; } -} |