← Back to branch summary

~daker/ubuntu-html5-theme/fix.1286833

« back to all changes in this revision

Viewing changes to 0.1/ambiance/css/progress-bars.css

  • Committer: Alexandre Abreu
  • Date: 2014-02-24 17:04:47 UTC
  • mfrom: (136.2.4 sass-setup)
  • Revision ID: alexandre.abreu@canonical.com-20140224170447-8fvba6ef2m06w6yr
Merge lp:~ya-bo-ng/ubuntu-html5-theme/sass-setup

Show diffs side-by-side

added added

removed removed

Lines of Context:
0.1/ambiance/css/progress-bars.css
1
 
/*
2
 
 * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
3
 
 * License granted by Canonical Limited
4
 
 *
5
 
 * This file is part of ubuntu-html5-ui-toolkit.
6
 
 *
7
 
 * This package is free software; you can redistribute it and/or modify
8
 
 * it under the terms of the GNU Lesser General Public License as
9
 
 * published by the Free Software Foundation; either version 3 of the
10
 
 * License, or
11
 
 * (at your option) any later version.
12
 
 
13
 
 * This package is distributed in the hope that it will be useful,
14
 
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
15
 
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
16
 
 * GNU General Public License for more details.
17
 
 
18
 
 * You should have received a copy of the GNU Lesser General Public
19
 
 * License along with this program. If not, see
20
 
 * <http://www.gnu.org/licenses/>.
21
 
 */
22
 
 
23
 
/* ----------------------------------
24
 
 * Progress + activities
25
 
 * ---------------------------------- */
26
 
 
27
 
/* Spinner */
28
 
progress {
29
 
    -webkit-appearance: none;
30
 
    height: 35px;
31
 
}
32
 
 
33
 
progress:not([value]) {
34
 
    background: url(../img/spinner@8.png) no-repeat center center / 100% auto;
35
 
    -webkit-animation: 1s rotate infinite steps(30);
36
 
    animation: 1s rotate infinite steps(30);
37
 
    width: 24px;
38
 
    height: 24px;
39
 
    border: none;
40
 
    display: inline-block;
41
 
    vertical-align: middle;
42
 
}
43
 
 
44
 
/* Bigger Spinner */
45
 
progress.bigger:not([value]) {
46
 
    background: url(../img/spinner@30.png) no-repeat center center / 100% auto;
47
 
    width: 90px;
48
 
    height: 90px;
49
 
}
50
 
 
51
 
progress:not([value])::-webkit-progress-bar {
52
 
    background: none;
53
 
    -webkit-box-shadow: none;
54
 
}
55
 
 
56
 
/* Progress bar */
57
 
progress[value]::-webkit-progress-value {
58
 
    width: 100%;
59
 
    background: #dd4814;
60
 
    border: none;
61
 
    border-radius: 6px;
62
 
    display: block;
63
 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
64
 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
65
 
}
66
 
 
67
 
progress[value]::-webkit-progress-bar {
68
 
    padding: 1px;
69
 
    background-color: rgba(192, 192, 192, 0.1);
70
 
    width: 200px;
71
 
    height: 35px;
72
 
    -webkit-box-sizing: border-box;
73
 
    box-sizing: border-box;
74
 
    border-radius: 6px;
75
 
    padding: 0;
76
 
    -webkit-box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.1);
77
 
    box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.1);
78
 
}
79
 
 
80
 
/* Infinite Progress bar */
81
 
progress[value].infinite::-webkit-progress-value {
82
 
    -webkit-appearance: none;
83
 
    /*-webkit-animation: 1.9s move infinite steps(15);
84
 
    animation: 1.9s move infinite steps(15);*/
85
 
}
86
 
 
87
 
/* Animations */
88
 
@-webkit-keyframes rotate {
89
 
    from { -webkit-transform: rotate(1deg); }
90
 
    to   { -webkit-transform: rotate(360deg); }
91
 
}
92
 
 
93
 
/*@-webkit-keyframes move {
94
 
    0% { width: -100px 0, 0 0, 0 0 }
95
 
    100% { width: 0 0, 0 0, 0 0 }
96
 
}*/
 
 
b'\\ No newline at end of file'