Merge lp:~whosdaz/ubuntu-html5-theme/googlecodein into lp:ubuntu-html5-theme
- googlecodein
- Merge into trunk
Proposed by
Matthew Allen
Status: | Superseded | ||||
---|---|---|---|---|---|
Proposed branch: | lp:~whosdaz/ubuntu-html5-theme/googlecodein | ||||
Merge into: | lp:ubuntu-html5-theme | ||||
Diff against target: |
551 lines (+94/-105) 4 files modified
0.1/ambiance/css/appTemplate.css (+48/-65) 0.1/ambiance/css/sass/default.scss (+3/-1) 0.1/ambiance/css/sass/toggles.scss (+37/-34) examples/html5-theme/widgets/Toggles.html (+6/-5) |
||||
To merge this branch: | bzr merge lp:~whosdaz/ubuntu-html5-theme/googlecodein | ||||
Related bugs: |
|
Reviewer | Review Type | Date Requested | Status |
---|---|---|---|
Alexandre Abreu | Needs Fixing | ||
Review via email:
|
Commit message
Description of the change
To post a comment you must log in.
- 218. By Matthew Allen
-
Fixed background colour of button, fixed Orange accents to Green, fixed sizing of tickboxes
Unmerged revisions
Preview Diff
[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1 | === modified file '0.1/ambiance/css/appTemplate.css' | |||
2 | --- 0.1/ambiance/css/appTemplate.css 2015-01-29 15:14:59 +0000 | |||
3 | +++ 0.1/ambiance/css/appTemplate.css 2015-12-12 11:57:23 +0000 | |||
4 | @@ -672,7 +672,7 @@ | |||
5 | 672 | } | 672 | } |
6 | 673 | 673 | ||
7 | 674 | .textfield.clear:focus { | 674 | .textfield.clear:focus { |
9 | 675 | background: url(artwork/icon_clear@20.png) no-repeat 97% center white; | 675 | background: url(artwork/icon_clear@20.png) no-repeat 97% center #fff; |
10 | 676 | background-size: 12%; | 676 | background-size: 12%; |
11 | 677 | } | 677 | } |
12 | 678 | 678 | ||
13 | @@ -785,7 +785,6 @@ | |||
14 | 785 | from { | 785 | from { |
15 | 786 | -webkit-transform: rotate(1deg); | 786 | -webkit-transform: rotate(1deg); |
16 | 787 | } | 787 | } |
17 | 788 | |||
18 | 789 | to { | 788 | to { |
19 | 790 | -webkit-transform: rotate(360deg); | 789 | -webkit-transform: rotate(360deg); |
20 | 791 | } | 790 | } |
21 | @@ -794,11 +793,9 @@ | |||
22 | 794 | 0% { | 793 | 0% { |
23 | 795 | opacity: 0; | 794 | opacity: 0; |
24 | 796 | } | 795 | } |
25 | 797 | |||
26 | 798 | 50% { | 796 | 50% { |
27 | 799 | opacity: 1; | 797 | opacity: 1; |
28 | 800 | } | 798 | } |
29 | 801 | |||
30 | 802 | 100% { | 799 | 100% { |
31 | 803 | opacity: 0; | 800 | opacity: 0; |
32 | 804 | } | 801 | } |
33 | @@ -928,43 +925,33 @@ | |||
34 | 928 | 0% { | 925 | 0% { |
35 | 929 | -webkit-transform: translate3d(0, 0, 0); | 926 | -webkit-transform: translate3d(0, 0, 0); |
36 | 930 | } | 927 | } |
37 | 931 | |||
38 | 932 | 10% { | 928 | 10% { |
39 | 933 | -webkit-transform: translate3d(-20px, 0, 0); | 929 | -webkit-transform: translate3d(-20px, 0, 0); |
40 | 934 | } | 930 | } |
41 | 935 | |||
42 | 936 | 20% { | 931 | 20% { |
43 | 937 | -webkit-transform: translate3d(20px, 0, 0); | 932 | -webkit-transform: translate3d(20px, 0, 0); |
44 | 938 | } | 933 | } |
45 | 939 | |||
46 | 940 | 30% { | 934 | 30% { |
47 | 941 | -webkit-transform: translate3d(-20px, 0, 0); | 935 | -webkit-transform: translate3d(-20px, 0, 0); |
48 | 942 | } | 936 | } |
49 | 943 | |||
50 | 944 | 40% { | 937 | 40% { |
51 | 945 | -webkit-transform: translate3d(20px, 0, 0); | 938 | -webkit-transform: translate3d(20px, 0, 0); |
52 | 946 | } | 939 | } |
53 | 947 | |||
54 | 948 | 50% { | 940 | 50% { |
55 | 949 | -webkit-transform: translate3d(-20px, 0, 0); | 941 | -webkit-transform: translate3d(-20px, 0, 0); |
56 | 950 | } | 942 | } |
57 | 951 | |||
58 | 952 | 60% { | 943 | 60% { |
59 | 953 | -webkit-transform: translate3d(20px, 0, 0); | 944 | -webkit-transform: translate3d(20px, 0, 0); |
60 | 954 | } | 945 | } |
61 | 955 | |||
62 | 956 | 70% { | 946 | 70% { |
63 | 957 | -webkit-transform: translate3d(-20px, 0, 0); | 947 | -webkit-transform: translate3d(-20px, 0, 0); |
64 | 958 | } | 948 | } |
65 | 959 | |||
66 | 960 | 80% { | 949 | 80% { |
67 | 961 | -webkit-transform: translate3d(20px, 0, 0); | 950 | -webkit-transform: translate3d(20px, 0, 0); |
68 | 962 | } | 951 | } |
69 | 963 | |||
70 | 964 | 90% { | 952 | 90% { |
71 | 965 | -webkit-transform: translate3d(-20px, 0, 0); | 953 | -webkit-transform: translate3d(-20px, 0, 0); |
72 | 966 | } | 954 | } |
73 | 967 | |||
74 | 968 | 100% { | 955 | 100% { |
75 | 969 | -webkit-transform: translate3d(0, 0, 0); | 956 | -webkit-transform: translate3d(0, 0, 0); |
76 | 970 | } | 957 | } |
77 | @@ -973,43 +960,33 @@ | |||
78 | 973 | 0% { | 960 | 0% { |
79 | 974 | -webkit-transform: translate3d(0, 0, 0); | 961 | -webkit-transform: translate3d(0, 0, 0); |
80 | 975 | } | 962 | } |
81 | 976 | |||
82 | 977 | 10% { | 963 | 10% { |
83 | 978 | -webkit-transform: translate3d(-20px, 0, 0); | 964 | -webkit-transform: translate3d(-20px, 0, 0); |
84 | 979 | } | 965 | } |
85 | 980 | |||
86 | 981 | 20% { | 966 | 20% { |
87 | 982 | -webkit-transform: translate3d(20px, 0, 0); | 967 | -webkit-transform: translate3d(20px, 0, 0); |
88 | 983 | } | 968 | } |
89 | 984 | |||
90 | 985 | 30% { | 969 | 30% { |
91 | 986 | -webkit-transform: translate3d(-20px, 0, 0); | 970 | -webkit-transform: translate3d(-20px, 0, 0); |
92 | 987 | } | 971 | } |
93 | 988 | |||
94 | 989 | 40% { | 972 | 40% { |
95 | 990 | -webkit-transform: translate3d(20px, 0, 0); | 973 | -webkit-transform: translate3d(20px, 0, 0); |
96 | 991 | } | 974 | } |
97 | 992 | |||
98 | 993 | 50% { | 975 | 50% { |
99 | 994 | -webkit-transform: translate3d(-20px, 0, 0); | 976 | -webkit-transform: translate3d(-20px, 0, 0); |
100 | 995 | } | 977 | } |
101 | 996 | |||
102 | 997 | 60% { | 978 | 60% { |
103 | 998 | -webkit-transform: translate3d(20px, 0, 0); | 979 | -webkit-transform: translate3d(20px, 0, 0); |
104 | 999 | } | 980 | } |
105 | 1000 | |||
106 | 1001 | 70% { | 981 | 70% { |
107 | 1002 | -webkit-transform: translate3d(-20px, 0, 0); | 982 | -webkit-transform: translate3d(-20px, 0, 0); |
108 | 1003 | } | 983 | } |
109 | 1004 | |||
110 | 1005 | 80% { | 984 | 80% { |
111 | 1006 | -webkit-transform: translate3d(20px, 0, 0); | 985 | -webkit-transform: translate3d(20px, 0, 0); |
112 | 1007 | } | 986 | } |
113 | 1008 | |||
114 | 1009 | 90% { | 987 | 90% { |
115 | 1010 | -webkit-transform: translate3d(-20px, 0, 0); | 988 | -webkit-transform: translate3d(-20px, 0, 0); |
116 | 1011 | } | 989 | } |
117 | 1012 | |||
118 | 1013 | 100% { | 990 | 100% { |
119 | 1014 | -webkit-transform: translate3d(0, 0, 0); | 991 | -webkit-transform: translate3d(0, 0, 0); |
120 | 1015 | } | 992 | } |
121 | @@ -1056,7 +1033,7 @@ | |||
122 | 1056 | background: #dd4814; | 1033 | background: #dd4814; |
123 | 1057 | border: 2px solid #dd4814; | 1034 | border: 2px solid #dd4814; |
124 | 1058 | border-radius: 6px; | 1035 | border-radius: 6px; |
126 | 1059 | color: white; | 1036 | color: #ffffff; |
127 | 1060 | font-family: "Ubuntu"; | 1037 | font-family: "Ubuntu"; |
128 | 1061 | font-size: 1rem; | 1038 | font-size: 1rem; |
129 | 1062 | padding: 9px 25px; | 1039 | padding: 9px 25px; |
130 | @@ -1066,21 +1043,21 @@ | |||
131 | 1066 | } | 1043 | } |
132 | 1067 | [data-role="button"].positive { | 1044 | [data-role="button"].positive { |
133 | 1068 | background: #38b44a; | 1045 | background: #38b44a; |
135 | 1069 | color: white; | 1046 | color: #ffffff; |
136 | 1070 | border-color: #38b44a; | 1047 | border-color: #38b44a; |
137 | 1071 | } | 1048 | } |
138 | 1072 | [data-role="button"].information { | 1049 | [data-role="button"].information { |
139 | 1073 | background: #2ab7ec; | 1050 | background: #2ab7ec; |
141 | 1074 | color: white; | 1051 | color: #ffffff; |
142 | 1075 | border-color: #2ab7ec; | 1052 | border-color: #2ab7ec; |
143 | 1076 | } | 1053 | } |
144 | 1077 | [data-role="button"].secondary { | 1054 | [data-role="button"].secondary { |
146 | 1078 | background: white; | 1055 | background: #ffffff; |
147 | 1079 | color: #888888; | 1056 | color: #888888; |
148 | 1080 | } | 1057 | } |
149 | 1081 | [data-role="button"].negative { | 1058 | [data-role="button"].negative { |
150 | 1082 | background: #929292; | 1059 | background: #929292; |
152 | 1083 | color: white; | 1060 | color: #ffffff; |
153 | 1084 | border-color: #929292; | 1061 | border-color: #929292; |
154 | 1085 | } | 1062 | } |
155 | 1086 | 1063 | ||
156 | @@ -1205,14 +1182,16 @@ | |||
157 | 1205 | * You should have received a copy of the GNU Lesser General Public | 1182 | * You should have received a copy of the GNU Lesser General Public |
158 | 1206 | * License along with this program. If not, see | 1183 | * License along with this program. If not, see |
159 | 1207 | * <http://www.gnu.org/licenses/>. | 1184 | * <http://www.gnu.org/licenses/>. |
160 | 1185 | * BOXES SCALED BY A FACTOR OF 0.65 | ||
161 | 1208 | */ | 1186 | */ |
162 | 1209 | label:not([for]) { | 1187 | label:not([for]) { |
163 | 1210 | display: inline-block; | 1188 | display: inline-block; |
164 | 1211 | vertical-align: middle; | 1189 | vertical-align: middle; |
166 | 1212 | width: 4.5rem; | 1190 | width: 2.925rem; |
167 | 1213 | height: 2.2rem; | 1191 | height: 2.2rem; |
168 | 1214 | position: relative; | 1192 | position: relative; |
169 | 1215 | background: none; | 1193 | background: none; |
170 | 1194 | margin-top: 15px; | ||
171 | 1216 | } | 1195 | } |
172 | 1217 | label:not([for]) input[type="checkbox"] { | 1196 | label:not([for]) input[type="checkbox"] { |
173 | 1218 | margin: 0; | 1197 | margin: 0; |
174 | @@ -1230,92 +1209,92 @@ | |||
175 | 1230 | left: 50%; | 1209 | left: 50%; |
176 | 1231 | top: 50%; | 1210 | top: 50%; |
177 | 1232 | margin: -1.1rem 0 0 -1.1rem; | 1211 | margin: -1.1rem 0 0 -1.1rem; |
180 | 1233 | width: 2rem; | 1212 | width: 1.25rem; |
181 | 1234 | height: 2rem; | 1213 | height: 1.15rem; |
182 | 1235 | pointer-events: none; | 1214 | pointer-events: none; |
183 | 1236 | border-radius: 6px; | 1215 | border-radius: 6px; |
186 | 1237 | background: rgba(0, 0, 0, 0.4); | 1216 | background: transparent; |
187 | 1238 | background-position-y: 30px; | 1217 | background-position-y: 5px; |
188 | 1239 | -webkit-transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out; | 1218 | -webkit-transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out; |
189 | 1240 | transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out; | 1219 | transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out; |
190 | 1241 | } | 1220 | } |
191 | 1242 | label:not([for]) input[type="checkbox"]:checked + span { | 1221 | label:not([for]) input[type="checkbox"]:checked + span { |
194 | 1243 | background: #dd4814 url(../img/tick-white@30.png) no-repeat 0.3rem 0.3rem; | 1222 | background: #00a132 url(../img/tick-white@30.png) no-repeat 0.2rem 0.2rem; |
195 | 1244 | background-size: 75% 75%; | 1223 | background-size: 70% 70%; |
196 | 1245 | background-position-y: 5px; | 1224 | background-position-y: 5px; |
197 | 1246 | -webkit-transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out; | 1225 | -webkit-transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out; |
198 | 1247 | transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out; | 1226 | transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out; |
199 | 1248 | } | 1227 | } |
200 | 1249 | label:not([for]) input[type="checkbox"]:disabled + span { | 1228 | label:not([for]) input[type="checkbox"]:disabled + span { |
202 | 1250 | background: rgba(0, 0, 0, 0.25) !important; | 1229 | background: rgba(0, 0, 0, 0.025) !important; |
203 | 1251 | } | 1230 | } |
204 | 1252 | label:not([for]) input[type="checkbox"]:disabled:checked + span { | 1231 | label:not([for]) input[type="checkbox"]:disabled:checked + span { |
207 | 1253 | background: rgba(221, 72, 20, 0.5) url(../img/tick-white@30.png) no-repeat 0.3rem 0.3rem !important; | 1232 | background: rgba(0, 161, 50, 0.5) url(../img/tick-white@30.png) no-repeat 0.2em 0.2rem !important; |
208 | 1254 | background-size: 75% 75% !important; | 1233 | background-size: 70% 70% !important; |
209 | 1255 | } | 1234 | } |
210 | 1256 | 1235 | ||
211 | 1257 | label input[type="checkbox"][data-type="switch"] + span.toggle { | 1236 | label input[type="checkbox"][data-type="switch"] + span.toggle { |
212 | 1258 | position: absolute; | 1237 | position: absolute; |
213 | 1259 | left: 50%; | 1238 | left: 50%; |
214 | 1260 | top: 50%; | 1239 | top: 50%; |
218 | 1261 | margin: -1.1rem 0 0 -2.2rem; | 1240 | margin: -1.1rem 0 0 -1.2rem; |
219 | 1262 | width: 4.5rem; | 1241 | width: 2.925rem; |
220 | 1263 | height: 2.2rem; | 1242 | height: 1.43rem; |
221 | 1264 | pointer-events: none; | 1243 | pointer-events: none; |
222 | 1265 | overflow: hidden; | 1244 | overflow: hidden; |
224 | 1266 | background: rgba(136, 136, 136, 0.3); | 1245 | background: rgba(136, 136, 136, 0.2); |
225 | 1267 | } | 1246 | } |
226 | 1268 | label input[type="checkbox"][data-type="switch"] + span.toggle > span.toggle-bg { | 1247 | label input[type="checkbox"][data-type="switch"] + span.toggle > span.toggle-bg { |
229 | 1269 | background: transparent url(../img/unCheckbox.png) no-repeat 0.4rem 0.35rem; | 1248 | background: transparent url(../img/unCheckbox.png) no-repeat 0.26rem 0.21rem; |
230 | 1270 | background-size: 90% 75%; | 1249 | background-size: 90% 80%; |
231 | 1271 | position: absolute; | 1250 | position: absolute; |
232 | 1272 | top: 0; | 1251 | top: 0; |
233 | 1273 | left: 0; | 1252 | left: 0; |
234 | 1274 | z-index: 10; | 1253 | z-index: 10; |
237 | 1275 | width: 4.5rem; | 1254 | width: 2.925rem; |
238 | 1276 | height: 2.1rem; | 1255 | height: 1.365rem; |
239 | 1277 | -webkit-transition: background-image 0.3s ease-in-out; | 1256 | -webkit-transition: background-image 0.3s ease-in-out; |
240 | 1278 | transition: background-image 0.3s ease-in-out; | 1257 | transition: background-image 0.3s ease-in-out; |
241 | 1279 | } | 1258 | } |
242 | 1280 | label input[type="checkbox"][data-type="switch"] + span.toggle > span.toggle-handle { | 1259 | label input[type="checkbox"][data-type="switch"] + span.toggle > span.toggle-handle { |
243 | 1281 | -webkit-box-sizing: border-box; | 1260 | -webkit-box-sizing: border-box; |
244 | 1282 | box-sizing: border-box; | 1261 | box-sizing: border-box; |
247 | 1283 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3); | 1262 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); |
248 | 1284 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3); | 1263 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); |
249 | 1285 | position: absolute; | 1264 | position: absolute; |
252 | 1286 | top: 2px; | 1265 | top: 3px; |
253 | 1287 | left: 2px; | 1266 | left: 3px; |
254 | 1288 | z-index: 2; | 1267 | z-index: 2; |
257 | 1289 | width: 2rem; | 1268 | width: 1.1rem; |
258 | 1290 | height: 2rem; | 1269 | height: 1.1rem; |
259 | 1291 | border-radius: 6px; | 1270 | border-radius: 6px; |
261 | 1292 | background: rgba(0, 0, 0, 0.4); | 1271 | background: rgba(0, 0, 0, 0.2); |
262 | 1293 | -webkit-transition: background 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; | 1272 | -webkit-transition: background 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; |
263 | 1294 | transition: background 0.3s ease-in-out, transform 0.3s ease-in-out; | 1273 | transition: background 0.3s ease-in-out, transform 0.3s ease-in-out; |
264 | 1295 | } | 1274 | } |
265 | 1296 | label input[type="checkbox"][data-type="switch"]:checked + span.toggle { | 1275 | label input[type="checkbox"][data-type="switch"]:checked + span.toggle { |
267 | 1297 | background: rgba(136, 136, 136, 0.3) !important; | 1276 | background: rgba(136, 136, 136, 0.2) !important; |
268 | 1298 | } | 1277 | } |
269 | 1299 | label input[type="checkbox"][data-type="switch"]:checked + span.toggle > span.toggle-bg { | 1278 | label input[type="checkbox"][data-type="switch"]:checked + span.toggle > span.toggle-bg { |
272 | 1300 | background: transparent url(../img/Checkbox.png) no-repeat 0.4rem 0.35rem; | 1279 | background: transparent url(../img/Checkbox.png) no-repeat 0.26rem 0.2275rem; |
273 | 1301 | background-size: 90% 75%; | 1280 | background-size: 90% 80%; |
274 | 1302 | } | 1281 | } |
275 | 1303 | label input[type="checkbox"][data-type="switch"]:checked + span.toggle > span.toggle-handle { | 1282 | label input[type="checkbox"][data-type="switch"]:checked + span.toggle > span.toggle-handle { |
279 | 1304 | background: #dd4814; | 1283 | background: #00a132; |
280 | 1305 | -webkit-transform: translate3d(38px, 0, 0); | 1284 | -webkit-transform: translate3d(24.7px, 0, 0); |
281 | 1306 | transform: translate3d(38px, 0, 0); | 1285 | transform: translate3d(24.7px, 0, 0); |
282 | 1307 | } | 1286 | } |
283 | 1308 | 1287 | ||
284 | 1309 | label input[data-type="switch"]:disabled + span.toggle { | 1288 | label input[data-type="switch"]:disabled + span.toggle { |
286 | 1310 | background: rgba(136, 136, 136, 0.3) !important; | 1289 | background: rgba(136, 136, 136, 0.03) !important; |
287 | 1311 | } | 1290 | } |
288 | 1312 | label input[data-type="switch"]:disabled + span.toggle > span.toggle-handle { | 1291 | label input[data-type="switch"]:disabled + span.toggle > span.toggle-handle { |
289 | 1313 | opacity: 0.4; | 1292 | opacity: 0.4; |
290 | 1314 | } | 1293 | } |
291 | 1315 | label input[data-type="switch"]:disabled:checked + span.toggle > span.toggle-handle { | 1294 | label input[data-type="switch"]:disabled:checked + span.toggle > span.toggle-handle { |
292 | 1316 | opacity: 0.4; | 1295 | opacity: 0.4; |
295 | 1317 | -webkit-transform: translate3d(38px, 0, 0); | 1296 | -webkit-transform: translate3d(24.7px, 0, 0); |
296 | 1318 | transform: translate3d(38px, 0, 0); | 1297 | transform: translate3d(24.7px, 0, 0); |
297 | 1319 | } | 1298 | } |
298 | 1320 | 1299 | ||
299 | 1321 | /* | 1300 | /* |
300 | @@ -1862,8 +1841,8 @@ | |||
301 | 1862 | * <http://www.gnu.org/licenses/>. | 1841 | * <http://www.gnu.org/licenses/>. |
302 | 1863 | */ | 1842 | */ |
303 | 1864 | [data-role="option-selector"] { | 1843 | [data-role="option-selector"] { |
306 | 1865 | -webkit-box-shadow: inset 0 2px 2px 0 #d5d5d5; | 1844 | -webkit-box-shadow: inset 0 2px 2px 0 #D5D5D5; |
307 | 1866 | box-shadow: inset 0 2px 2px 0 #d5d5d5; | 1845 | box-shadow: inset 0 2px 2px 0 #D5D5D5; |
308 | 1867 | width: 100%; | 1846 | width: 100%; |
309 | 1868 | height: auto; | 1847 | height: auto; |
310 | 1869 | margin: 0 auto; | 1848 | margin: 0 auto; |
311 | @@ -2043,6 +2022,8 @@ | |||
312 | 2043 | } | 2022 | } |
313 | 2044 | 2023 | ||
314 | 2045 | .medium-font { | 2024 | .medium-font { |
315 | 2025 | width: 100px; | ||
316 | 2026 | display: inline-block; | ||
317 | 2046 | font-size: 14px; | 2027 | font-size: 14px; |
318 | 2047 | line-height: 1.3; | 2028 | line-height: 1.3; |
319 | 2048 | } | 2029 | } |
320 | @@ -2061,3 +2042,5 @@ | |||
321 | 2061 | font-size: 8px; | 2042 | font-size: 8px; |
322 | 2062 | line-height: 1.3; | 2043 | line-height: 1.3; |
323 | 2063 | } | 2044 | } |
324 | 2045 | |||
325 | 2046 | /*# sourceMappingURL=appTemplate.css.map */ | ||
326 | 2064 | 2047 | ||
327 | === modified file '0.1/ambiance/css/sass/default.scss' | |||
328 | --- 0.1/ambiance/css/sass/default.scss 2014-08-29 00:33:51 +0000 | |||
329 | +++ 0.1/ambiance/css/sass/default.scss 2015-12-12 11:57:23 +0000 | |||
330 | @@ -120,6 +120,8 @@ | |||
331 | 120 | } | 120 | } |
332 | 121 | 121 | ||
333 | 122 | .medium-font { | 122 | .medium-font { |
334 | 123 | width: 100px; | ||
335 | 124 | display: inline-block; | ||
336 | 123 | font-size: 14px; | 125 | font-size: 14px; |
337 | 124 | line-height: 1.3; | 126 | line-height: 1.3; |
338 | 125 | } | 127 | } |
339 | @@ -137,4 +139,4 @@ | |||
340 | 137 | .xxsmall-font { | 139 | .xxsmall-font { |
341 | 138 | font-size: 8px; | 140 | font-size: 8px; |
342 | 139 | line-height: 1.3; | 141 | line-height: 1.3; |
343 | 140 | } | ||
344 | 141 | \ No newline at end of file | 142 | \ No newline at end of file |
345 | 143 | } | ||
346 | 142 | 144 | ||
347 | === modified file '0.1/ambiance/css/sass/toggles.scss' | |||
348 | --- 0.1/ambiance/css/sass/toggles.scss 2014-02-19 22:25:29 +0000 | |||
349 | +++ 0.1/ambiance/css/sass/toggles.scss 2015-12-12 11:57:23 +0000 | |||
350 | @@ -18,15 +18,17 @@ | |||
351 | 18 | * You should have received a copy of the GNU Lesser General Public | 18 | * You should have received a copy of the GNU Lesser General Public |
352 | 19 | * License along with this program. If not, see | 19 | * License along with this program. If not, see |
353 | 20 | * <http://www.gnu.org/licenses/>. | 20 | * <http://www.gnu.org/licenses/>. |
354 | 21 | * BOXES SCALED BY A FACTOR OF 0.65 | ||
355 | 21 | */ | 22 | */ |
356 | 22 | 23 | ||
357 | 23 | label:not([for]) { | 24 | label:not([for]) { |
358 | 24 | display: inline-block; | 25 | display: inline-block; |
359 | 25 | vertical-align: middle; | 26 | vertical-align: middle; |
361 | 26 | width: 4.5rem; | 27 | width: 2.925rem; |
362 | 27 | height: 2.2rem; | 28 | height: 2.2rem; |
363 | 28 | position: relative; | 29 | position: relative; |
364 | 29 | background: none; | 30 | background: none; |
365 | 31 | margin-top: 15px; | ||
366 | 30 | 32 | ||
367 | 31 | input[type="checkbox"] { | 33 | input[type="checkbox"] { |
368 | 32 | margin: 0; | 34 | margin: 0; |
369 | @@ -35,6 +37,7 @@ | |||
370 | 35 | top: 0; | 37 | top: 0; |
371 | 36 | left: 0; | 38 | left: 0; |
372 | 37 | 39 | ||
373 | 40 | |||
374 | 38 | & + span { | 41 | & + span { |
375 | 39 | @include box_shadow (inset 0 1px 1px rgba(0, 0, 0, 0.3)); | 42 | @include box_shadow (inset 0 1px 1px rgba(0, 0, 0, 0.3)); |
376 | 40 | @include box_sizing (border-box); | 43 | @include box_sizing (border-box); |
377 | @@ -42,20 +45,20 @@ | |||
378 | 42 | left: 50%; | 45 | left: 50%; |
379 | 43 | top: 50%; | 46 | top: 50%; |
380 | 44 | margin: -1.1rem 0 0 -1.1rem; | 47 | margin: -1.1rem 0 0 -1.1rem; |
383 | 45 | width: 2rem; | 48 | width: 1.25rem; |
384 | 46 | height: 2rem; | 49 | height: 1.15rem; |
385 | 47 | pointer-events: none; | 50 | pointer-events: none; |
386 | 48 | border-radius: 6px; | 51 | border-radius: 6px; |
389 | 49 | background: rgba(0, 0, 0, 0.4); | 52 | background: rgba(0, 0, 0, 0.0); |
390 | 50 | background-position-y: 30px; | 53 | background-position-y: 5px; |
391 | 51 | -webkit-transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out; | 54 | -webkit-transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out; |
392 | 52 | transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out; | 55 | transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out; |
393 | 53 | } | 56 | } |
394 | 54 | 57 | ||
395 | 55 | 58 | ||
396 | 56 | &:checked + span { | 59 | &:checked + span { |
399 | 57 | background: $ubuntu_orange url(../img/tick-white@30.png) no-repeat 0.3rem 0.3rem; | 60 | background: rgba(0,161,50, 255) url(../img/tick-white@30.png) no-repeat 0.2rem 0.2rem; |
400 | 58 | background-size: 75% 75%; | 61 | background-size: 70% 70%; |
401 | 59 | background-position-y: 5px; | 62 | background-position-y: 5px; |
402 | 60 | -webkit-transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out; | 63 | -webkit-transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out; |
403 | 61 | transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out; | 64 | transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out; |
404 | @@ -63,12 +66,12 @@ | |||
405 | 63 | 66 | ||
406 | 64 | &:disabled { | 67 | &:disabled { |
407 | 65 | + span { | 68 | + span { |
409 | 66 | background: rgba(0, 0, 0, 0.25)!important; | 69 | background: rgba(0, 0, 0, 0.025)!important; |
410 | 67 | } | 70 | } |
411 | 68 | 71 | ||
412 | 69 | &:checked + span { | 72 | &:checked + span { |
415 | 70 | background: rgba(221, 72, 20, 0.5) url(../img/tick-white@30.png) no-repeat 0.3rem 0.3rem!important; | 73 | background: rgba(0,161,50, 0.5) url(../img/tick-white@30.png) no-repeat 0.2em 0.2rem!important; |
416 | 71 | background-size: 75% 75%!important; | 74 | background-size: 70% 70%!important; |
417 | 72 | } | 75 | } |
418 | 73 | } | 76 | } |
419 | 74 | } | 77 | } |
420 | @@ -79,61 +82,61 @@ | |||
421 | 79 | position: absolute; | 82 | position: absolute; |
422 | 80 | left: 50%; | 83 | left: 50%; |
423 | 81 | top: 50%; | 84 | top: 50%; |
427 | 82 | margin: -1.1rem 0 0 -2.2rem; | 85 | margin: -1.1rem 0 0 -1.2rem; |
428 | 83 | width: 4.5rem; | 86 | width: 2.925rem; |
429 | 84 | height: 2.2rem; | 87 | height: 1.43rem; |
430 | 85 | pointer-events: none; | 88 | pointer-events: none; |
431 | 86 | overflow: hidden; | 89 | overflow: hidden; |
433 | 87 | background: rgba(136, 136, 136, 0.3); | 90 | background: rgba(136, 136, 136, 0.2); |
434 | 88 | 91 | ||
435 | 89 | > span.toggle-bg { | 92 | > span.toggle-bg { |
438 | 90 | background: transparent url(../img/unCheckbox.png) no-repeat 0.4rem 0.35rem; | 93 | background: transparent url(../img/unCheckbox.png) no-repeat 0.26rem 0.21rem; |
439 | 91 | background-size: 90% 75%; | 94 | background-size: 90% 80%; |
440 | 92 | position: absolute; | 95 | position: absolute; |
441 | 93 | top: 0; | 96 | top: 0; |
442 | 94 | left: 0; | 97 | left: 0; |
443 | 95 | z-index: 10; | 98 | z-index: 10; |
446 | 96 | width: 4.5rem; | 99 | width: 2.925rem; |
447 | 97 | height: 2.1rem; | 100 | height: 1.365rem; |
448 | 98 | -webkit-transition: background-image 0.3s ease-in-out; | 101 | -webkit-transition: background-image 0.3s ease-in-out; |
449 | 99 | transition: background-image 0.3s ease-in-out; | 102 | transition: background-image 0.3s ease-in-out; |
450 | 100 | } | 103 | } |
451 | 101 | 104 | ||
452 | 102 | > span.toggle-handle { | 105 | > span.toggle-handle { |
453 | 103 | @include box_sizing (border-box); | 106 | @include box_sizing (border-box); |
455 | 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)); |
456 | 105 | position: absolute; | 108 | position: absolute; |
459 | 106 | top: 2px; | 109 | top: 3px; |
460 | 107 | left: 2px; | 110 | left: 3px; |
461 | 108 | z-index: 2; | 111 | z-index: 2; |
464 | 109 | width: 2rem; | 112 | width: 1.1rem; |
465 | 110 | height: 2rem; | 113 | height: 1.1rem; |
466 | 111 | border-radius: 6px; | 114 | border-radius: 6px; |
468 | 112 | background: rgba(0, 0, 0, 0.4); | 115 | background: rgba(0, 0, 0, 0.2); |
469 | 113 | -webkit-transition: background 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; | 116 | -webkit-transition: background 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; |
470 | 114 | transition: background 0.3s ease-in-out, transform 0.3s ease-in-out; | 117 | transition: background 0.3s ease-in-out, transform 0.3s ease-in-out; |
471 | 115 | } | 118 | } |
472 | 116 | } | 119 | } |
473 | 117 | 120 | ||
474 | 118 | &:checked + span.toggle { | 121 | &:checked + span.toggle { |
476 | 119 | background: rgba(136, 136, 136, 0.3) !important; | 122 | background: rgba(136, 136, 136, 0.2) !important; |
477 | 120 | 123 | ||
478 | 121 | > span.toggle-bg { | 124 | > span.toggle-bg { |
481 | 122 | background: transparent url(../img/Checkbox.png) no-repeat 0.4rem 0.35rem; | 125 | background: transparent url(../img/Checkbox.png) no-repeat 0.26rem 0.2275rem; |
482 | 123 | background-size: 90% 75%; | 126 | background-size: 90% 80%; |
483 | 124 | } | 127 | } |
484 | 125 | 128 | ||
485 | 126 | > span.toggle-handle { | 129 | > span.toggle-handle { |
489 | 127 | background: rgb(221, 72, 20); | 130 | background: rgba(0,161,50, 255); |
490 | 128 | -webkit-transform: translate3d(38px, 0, 0); | 131 | -webkit-transform: translate3d(24.7px, 0, 0); |
491 | 129 | transform: translate3d(38px, 0, 0); | 132 | transform: translate3d(24.7px, 0, 0); |
492 | 130 | } | 133 | } |
493 | 131 | } | 134 | } |
494 | 132 | } | 135 | } |
495 | 133 | 136 | ||
496 | 134 | label input[data-type="switch"]:disabled { | 137 | label input[data-type="switch"]:disabled { |
497 | 135 | + span.toggle { | 138 | + span.toggle { |
499 | 136 | background: rgba(136, 136, 136, 0.3) !important; | 139 | background: rgba(136, 136, 136, 0.03) !important; |
500 | 137 | 140 | ||
501 | 138 | > span.toggle-handle { | 141 | > span.toggle-handle { |
502 | 139 | opacity: 0.4; | 142 | opacity: 0.4; |
503 | @@ -142,7 +145,7 @@ | |||
504 | 142 | 145 | ||
505 | 143 | &:checked + span.toggle > span.toggle-handle { | 146 | &:checked + span.toggle > span.toggle-handle { |
506 | 144 | opacity: 0.4; | 147 | opacity: 0.4; |
509 | 145 | -webkit-transform: translate3d(38px, 0, 0); | 148 | -webkit-transform: translate3d(24.7px, 0, 0); |
510 | 146 | transform: translate3d(38px, 0, 0); | 149 | transform: translate3d(24.7px, 0, 0); |
511 | 147 | } | 150 | } |
512 | 148 | } | ||
513 | 149 | \ No newline at end of file | 151 | \ No newline at end of file |
514 | 152 | } | ||
515 | 150 | 153 | ||
516 | === modified file 'examples/html5-theme/widgets/Toggles.html' | |||
517 | --- examples/html5-theme/widgets/Toggles.html 2014-02-12 19:46:04 +0000 | |||
518 | +++ examples/html5-theme/widgets/Toggles.html 2015-12-12 11:57:23 +0000 | |||
519 | @@ -44,14 +44,14 @@ | |||
520 | 44 | 44 | ||
521 | 45 | <div class="inset"> | 45 | <div class="inset"> |
522 | 46 | <span class="medium-font">Unchecked</span> | 46 | <span class="medium-font">Unchecked</span> |
524 | 47 | <label> | 47 | <label class="checkbox"> |
525 | 48 | <input type="checkbox"> | 48 | <input type="checkbox"> |
527 | 49 | <span></span> | 49 | <span class="checkbox"></span> |
528 | 50 | </label> | 50 | </label> |
529 | 51 | </div> | 51 | </div> |
531 | 52 | <div> | 52 | <div class="inset"> |
532 | 53 | <span class="medium-font">Checked</span> | 53 | <span class="medium-font">Checked</span> |
534 | 54 | <label> | 54 | <label class="checkbox"> |
535 | 55 | <input type="checkbox" checked=""> | 55 | <input type="checkbox" checked=""> |
536 | 56 | <span></span> | 56 | <span></span> |
537 | 57 | </label> | 57 | </label> |
538 | @@ -60,7 +60,7 @@ | |||
539 | 60 | <div> | 60 | <div> |
540 | 61 | <span class="medium-font">Disabled</span> | 61 | <span class="medium-font">Disabled</span> |
541 | 62 | <div class="inset" style="display:inline"> | 62 | <div class="inset" style="display:inline"> |
543 | 63 | <label> | 63 | <label class="checkbox"> |
544 | 64 | <input type="checkbox" checked="" disabled=""> | 64 | <input type="checkbox" checked="" disabled=""> |
545 | 65 | <span></span> | 65 | <span></span> |
546 | 66 | </label> | 66 | </label> |
547 | @@ -131,3 +131,4 @@ | |||
548 | 131 | </div> | 131 | </div> |
549 | 132 | </body> | 132 | </body> |
550 | 133 | </html> | 133 | </html> |
551 | 134 |
Thank you for working on that ! :)
A few comments:
- the checkboxes appear to be slightly bigger than the qml version,
- for checkboxes, the tick images are not properly aligned in the box, and they are a bit smaller than the qml version,
- the back color should not be orange but green,
- the switch ticks are a bit bolder than the checkbox versions,
- the back color for the uncheck is not the right grey,