← Back to branch summary

~mvo/ubuntu-html5-theme/multiarch-fixes

« back to all changes in this revision

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

  • Committer: CI bot
  • Author(s): Alexandre Abreu
  • Date: 2014-03-03 16:54:21 UTC
  • mfrom: (146.2.8 latest)
  • Revision ID: ps-jenkins@lists.canonical.com-20140303165421-zx21ngm0xmv8kfta
This branch concatenates several CSS updates that need to be manually merged right now to avoid a conflict in the appTemplate.css file that is re-generated by SASS.

The branches where:

https://code.launchpad.net/~ya-bo-ng/ubuntu-html5-theme/update-progress-bar/+merge/206386
https://code.launchpad.net/~ya-bo-ng/ubuntu-html5-theme/adding-svg-images/+merge/207689
https://code.launchpad.net/~abreu-alexandre/ubuntu-html5-theme/fix.toggle-zindex/+merge/207979
https://code.launchpad.net/~ya-bo-ng/ubuntu-html5-theme/button-update/+merge/208029
https://code.launchpad.net/~daker/ubuntu-html5-theme/untabiffy-pagejs/+merge/208022
https://code.launchpad.net/~abreu-alexandre/ubuntu-html5-theme/fix-docs-html5-new-structure/+merge/208227 

Show diffs side-by-side

added added

removed removed

Lines of Context:
0.1/ambiance/css/sass/progress-bars.scss
24
24
 * Progress + activities
25
25
 * ---------------------------------- */
26
26
 
27
 
/* Spinner */
28
27
progress {
29
28
    -webkit-appearance: none;
30
29
    height: 35px;
 
30
    width: 100%;
 
31
    position: relative;
 
32
    background: #b2b2b2;
 
33
    border-radius: 6px;
 
34
    overflow: hidden;
 
35
 
 
36
    &:after {
 
37
        content: attr(data-percentage);
 
38
        position: relative;
 
39
        display: block;
 
40
        width: 100%;
 
41
        text-align: center;
 
42
        color: #fff;
 
43
        top: -28px;
 
44
        opacity: 1;
 
45
    }
31
46
 
32
47
    &:not([value]) {
33
48
        background: url(../img/spinner@8.png) no-repeat center center / 100% auto;
38
53
        border: none;
39
54
        display: inline-block;
40
55
        vertical-align: middle;
41
 
 
42
 
        &::-webkit-progress-bar {
43
 
            @include box_shadow (none);
44
 
            background: none;
45
 
        }
46
56
    }
47
57
 
 
58
    /* Bigger Spinner */
48
59
    &.bigger:not([value]) {
49
60
        background: url(../img/spinner@30.png) no-repeat center center / 100% auto;
50
61
        width: 90px;
51
62
        height: 90px;
52
63
    }
53
 
}
54
 
 
55
 
/* Progress bar */
56
 
progress[value]{
57
 
    &::-webkit-progress-value {
58
 
        @include box_shadow (inset 0 1px 1px rgba(0, 0, 0, 0.1));
 
64
 
 
65
    &:not([value])::-webkit-progress-bar {
 
66
        background: none;
 
67
        -webkit-box-shadow: none;
 
68
    }
 
69
 
 
70
    /* Progress bar */
 
71
    &[value]::-webkit-progress-value {
59
72
        width: 100%;
60
 
        background: $ubuntu_orange;
 
73
        background: #2ab7ec;
61
74
        border: none;
62
 
        border-radius: 6px;
63
75
        display: block;
 
76
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
 
77
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
64
78
    }
65
 
    &::-webkit-progress-bar {
66
 
        @include box_sizing (border-box);
67
 
        @include box_shadow (inset 0 2px 1px rgba(0, 0, 0, 0.1));
 
79
 
 
80
    &[value]::-webkit-progress-bar {
68
81
        padding: 1px;
69
82
        background-color: rgba(192, 192, 192, 0.1);
70
 
        width: 200px;
 
83
        width: 100%;
71
84
        height: 35px;
 
85
        -webkit-box-sizing: border-box;
 
86
        box-sizing: border-box;
72
87
        border-radius: 6px;
73
88
        padding: 0;
 
89
        -webkit-box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.1);
 
90
        box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.1);
74
91
    }
75
 
    &.infinite::-webkit-progress-value {
 
92
 
 
93
    &[value].infinite::-webkit-progress-value {
76
94
        -webkit-appearance: none;
77
 
        /*-webkit-animation: 1.9s move infinite steps(15);
78
 
        animation: 1.9s move infinite steps(15);*/
 
95
    }
 
96
 
 
97
    &.infinite:after {
 
98
        content: "In progress";
 
99
        -webkit-animation: 1.3s fade-in-out infinite;
 
100
        animation: 1.3s fade-in-out infinite;
 
101
        color: #fff;
 
102
        text-shadow: none;
79
103
    }
80
104
}
81
105
 
85
109
    to   { -webkit-transform: rotate(360deg); }
86
110
}
87
111
 
88
 
/*@-webkit-keyframes move {
89
 
    0% { width: -100px 0, 0 0, 0 0 }
90
 
    100% { width: 0 0, 0 0, 0 0 }
91
 
}*/
 
 
b'\\ No newline at end of file'
 
112
@-webkit-keyframes fade-in-out {
 
113
    0%   { opacity: 0; }
 
114
    50%  { opacity: 1; }
 
115
    100% { opacity: 0; }
 
116
}