← Back to branch summary

~ci-train-bot/ubuntu-html5-theme/ubuntu-html5-theme-ubuntu-yakkety-landing-067

« back to all changes in this revision

Viewing changes to 0.1/ambiance/css/sass/toggles.scss

  • Committer: CI Train Bot
  • Author(s): Alexandre Abreu
  • Date: 2016-02-03 21:27:50 UTC
  • mfrom: (211.2.4 latest)
  • Revision ID: ci-train-bot@canonical.com-20160203212750-id7tn9xqkru3qipq
Merge fix branches
Approved by: Alexandre Abreu, PS Jenkins bot

Show diffs side-by-side

added added

removed removed

Lines of Context:
0.1/ambiance/css/sass/toggles.scss
18
18
 * You should have received a copy of the GNU Lesser General Public
19
19
 * License along with this program. If not, see
20
20
 * <http://www.gnu.org/licenses/>.
 
21
 * BOXES SCALED BY A FACTOR OF 0.65
21
22
 */
22
23
 
23
24
label:not([for])  {
24
25
    display: inline-block;
25
26
    vertical-align: middle;
26
 
    width: 4.5rem;
 
27
    width: 2.925rem;
27
28
    height: 2.2rem;
28
29
    position: relative;
29
30
    background: none;
 
31
    margin-top: 15px;
30
32
 
31
33
    input[type="checkbox"] {
32
34
        margin: 0;
35
37
        top: 0;
36
38
        left: 0;
37
39
 
 
40
 
38
41
        & + span {
39
42
            @include box_shadow (inset 0 1px 1px rgba(0, 0, 0, 0.3));
40
43
            @include box_sizing (border-box);
42
45
            left: 50%;
43
46
            top: 50%;
44
47
            margin: -1.1rem 0 0 -1.1rem;
45
 
            width: 2rem;
46
 
            height: 2rem;
 
48
            width: 1.25rem;
 
49
            height: 1.15rem;
47
50
            pointer-events: none;
48
51
            border-radius: 6px;
49
 
            background: rgba(0, 0, 0, 0.4);
50
 
            background-position-y: 30px;
 
52
            background: rgba(0, 0, 0, 0.0);
 
53
            background-position-y: 5px;
51
54
            -webkit-transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
52
55
            transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
53
56
        }
54
57
 
55
58
 
56
59
        &:checked + span {
57
 
            background: $ubuntu_orange url(../img/tick-white@30.png) no-repeat 0.3rem 0.3rem;
58
 
            background-size: 75% 75%;
 
60
            background: rgba(0,161,50, 255) url(../img/tick-white@30.png)                   no-repeat 0.2rem 0.2rem;
 
61
            background-size: 70% 70%;
59
62
            background-position-y: 5px;
60
63
            -webkit-transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
61
64
            transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
63
66
 
64
67
        &:disabled {
65
68
            + span {
66
 
                background: rgba(0, 0, 0, 0.25)!important;
 
69
                background: rgba(0, 0, 0, 0.025)!important;
67
70
            }
68
71
 
69
72
            &:checked + span {
70
 
                background: rgba(221, 72, 20, 0.5) url(../img/tick-white@30.png) no-repeat 0.3rem 0.3rem!important;
71
 
                background-size: 75% 75%!important;
 
73
                background: rgba(0,161,50, 0.5) url(../img/tick-white@30.png) no-repeat 0.2em 0.2rem!important;
 
74
                background-size: 70% 70%!important;
72
75
            }
73
76
        }
74
77
    }
79
82
        position: absolute;
80
83
        left: 50%;
81
84
        top: 50%;
82
 
        margin: -1.1rem 0 0 -2.2rem;
83
 
        width: 4.5rem;
84
 
        height: 2.2rem;
 
85
        margin: -1.1rem 0 0 -1.2rem;
 
86
        width: 2.925rem;
 
87
        height: 1.43rem;
85
88
        pointer-events: none;
86
89
        overflow: hidden;
87
 
        background: rgba(136, 136, 136, 0.3);
 
90
        background: rgba(136, 136, 136, 0.2);
88
91
 
89
92
        > span.toggle-bg {
90
 
            background: transparent url(../img/unCheckbox.png) no-repeat 0.4rem 0.35rem;
91
 
            background-size: 90% 75%;
 
93
            background: transparent url(../img/unCheckbox.png) no-repeat 0.26rem 0.21rem;
 
94
            background-size: 90% 80%;
92
95
            position: absolute;
93
96
            top: 0;
94
97
            left: 0;
95
98
            z-index: 10;
96
 
            width: 4.5rem;
97
 
            height: 2.1rem;
 
99
            width: 2.925rem;
 
100
            height: 1.365rem;
98
101
            -webkit-transition: background-image 0.3s ease-in-out;
99
102
            transition: background-image 0.3s ease-in-out;
100
103
        }
101
104
 
102
105
        > span.toggle-handle {
103
106
            @include box_sizing (border-box);
104
 
            @include box_shadow (inset 0 1px 1px rgba(0, 0, 0, 0.3));
 
107
            @include box_shadow (inset 0 1px 1px rgba(0, 0, 0, 0.2));
105
108
            position: absolute;
106
 
            top: 2px;
107
 
            left: 2px;
 
109
            top: 3px;
 
110
            left: 3px;
108
111
            z-index: 2;
109
 
            width: 2rem;
110
 
            height: 2rem;
 
112
            width: 1.1rem;
 
113
            height: 1.1rem;
111
114
            border-radius: 6px;
112
 
            background: rgba(0, 0, 0, 0.4);
 
115
            background: rgba(0, 0, 0, 0.2);
113
116
            -webkit-transition: background 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
114
117
            transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
115
118
        }
116
119
    }
117
120
 
118
121
    &:checked + span.toggle {
119
 
        background: rgba(136, 136, 136, 0.3) !important;
 
122
        background: rgba(136, 136, 136, 0.2) !important;
120
123
 
121
124
        > span.toggle-bg {
122
 
            background: transparent url(../img/Checkbox.png) no-repeat 0.4rem 0.35rem;
123
 
            background-size: 90% 75%;
 
125
            background: transparent url(../img/Checkbox.png) no-repeat 0.26rem 0.2275rem;
 
126
            background-size: 90% 80%;   
124
127
        }
125
128
 
126
129
        > span.toggle-handle {
127
 
            background: rgb(221, 72, 20);
128
 
            -webkit-transform: translate3d(38px, 0, 0);
129
 
            transform: translate3d(38px, 0, 0);
 
130
            background: rgba(0,161,50, 255);
 
131
            -webkit-transform: translate3d(24.7px, 0, 0);
 
132
            transform: translate3d(24.7px, 0, 0);
130
133
        }
131
134
    }
132
135
}
133
136
 
134
137
label input[data-type="switch"]:disabled {
135
138
    + span.toggle {
136
 
        background: rgba(136, 136, 136, 0.3) !important;
 
139
        background: rgba(136, 136, 136, 0.03) !important;
137
140
 
138
141
        > span.toggle-handle {
139
142
            opacity: 0.4;
142
145
 
143
146
    &:checked + span.toggle > span.toggle-handle {
144
147
        opacity: 0.4;
145
 
        -webkit-transform: translate3d(38px, 0, 0);
146
 
        transform: translate3d(38px, 0, 0);
 
148
        -webkit-transform: translate3d(24.7px, 0, 0);
 
149
        transform: translate3d(24.7px, 0, 0);
147
150
    }
148
 
}
 
 
b'\\ No newline at end of file'
 
151
}