Merge lp:~whosdaz/ubuntu-html5-theme/googlecodein into lp:ubuntu-html5-theme

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
Reviewer Review Type Date Requested Status
Alexandre Abreu Needs Fixing
Review via email: mp+280292@code.launchpad.net
To post a comment you must log in.
Revision history for this message
Alexandre Abreu (abreu-alexandre) wrote :

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,

review: Needs Fixing
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
=== modified file '0.1/ambiance/css/appTemplate.css'
--- 0.1/ambiance/css/appTemplate.css 2015-01-29 15:14:59 +0000
+++ 0.1/ambiance/css/appTemplate.css 2015-12-12 11:57:23 +0000
@@ -672,7 +672,7 @@
672}672}
673673
674.textfield.clear:focus {674.textfield.clear:focus {
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;
676 background-size: 12%;676 background-size: 12%;
677}677}
678678
@@ -785,7 +785,6 @@
785 from {785 from {
786 -webkit-transform: rotate(1deg);786 -webkit-transform: rotate(1deg);
787 }787 }
788
789 to {788 to {
790 -webkit-transform: rotate(360deg);789 -webkit-transform: rotate(360deg);
791 }790 }
@@ -794,11 +793,9 @@
794 0% {793 0% {
795 opacity: 0;794 opacity: 0;
796 }795 }
797
798 50% {796 50% {
799 opacity: 1;797 opacity: 1;
800 }798 }
801
802 100% {799 100% {
803 opacity: 0;800 opacity: 0;
804 }801 }
@@ -928,43 +925,33 @@
928 0% {925 0% {
929 -webkit-transform: translate3d(0, 0, 0);926 -webkit-transform: translate3d(0, 0, 0);
930 }927 }
931
932 10% {928 10% {
933 -webkit-transform: translate3d(-20px, 0, 0);929 -webkit-transform: translate3d(-20px, 0, 0);
934 }930 }
935
936 20% {931 20% {
937 -webkit-transform: translate3d(20px, 0, 0);932 -webkit-transform: translate3d(20px, 0, 0);
938 }933 }
939
940 30% {934 30% {
941 -webkit-transform: translate3d(-20px, 0, 0);935 -webkit-transform: translate3d(-20px, 0, 0);
942 }936 }
943
944 40% {937 40% {
945 -webkit-transform: translate3d(20px, 0, 0);938 -webkit-transform: translate3d(20px, 0, 0);
946 }939 }
947
948 50% {940 50% {
949 -webkit-transform: translate3d(-20px, 0, 0);941 -webkit-transform: translate3d(-20px, 0, 0);
950 }942 }
951
952 60% {943 60% {
953 -webkit-transform: translate3d(20px, 0, 0);944 -webkit-transform: translate3d(20px, 0, 0);
954 }945 }
955
956 70% {946 70% {
957 -webkit-transform: translate3d(-20px, 0, 0);947 -webkit-transform: translate3d(-20px, 0, 0);
958 }948 }
959
960 80% {949 80% {
961 -webkit-transform: translate3d(20px, 0, 0);950 -webkit-transform: translate3d(20px, 0, 0);
962 }951 }
963
964 90% {952 90% {
965 -webkit-transform: translate3d(-20px, 0, 0);953 -webkit-transform: translate3d(-20px, 0, 0);
966 }954 }
967
968 100% {955 100% {
969 -webkit-transform: translate3d(0, 0, 0);956 -webkit-transform: translate3d(0, 0, 0);
970 }957 }
@@ -973,43 +960,33 @@
973 0% {960 0% {
974 -webkit-transform: translate3d(0, 0, 0);961 -webkit-transform: translate3d(0, 0, 0);
975 }962 }
976
977 10% {963 10% {
978 -webkit-transform: translate3d(-20px, 0, 0);964 -webkit-transform: translate3d(-20px, 0, 0);
979 }965 }
980
981 20% {966 20% {
982 -webkit-transform: translate3d(20px, 0, 0);967 -webkit-transform: translate3d(20px, 0, 0);
983 }968 }
984
985 30% {969 30% {
986 -webkit-transform: translate3d(-20px, 0, 0);970 -webkit-transform: translate3d(-20px, 0, 0);
987 }971 }
988
989 40% {972 40% {
990 -webkit-transform: translate3d(20px, 0, 0);973 -webkit-transform: translate3d(20px, 0, 0);
991 }974 }
992
993 50% {975 50% {
994 -webkit-transform: translate3d(-20px, 0, 0);976 -webkit-transform: translate3d(-20px, 0, 0);
995 }977 }
996
997 60% {978 60% {
998 -webkit-transform: translate3d(20px, 0, 0);979 -webkit-transform: translate3d(20px, 0, 0);
999 }980 }
1000
1001 70% {981 70% {
1002 -webkit-transform: translate3d(-20px, 0, 0);982 -webkit-transform: translate3d(-20px, 0, 0);
1003 }983 }
1004
1005 80% {984 80% {
1006 -webkit-transform: translate3d(20px, 0, 0);985 -webkit-transform: translate3d(20px, 0, 0);
1007 }986 }
1008
1009 90% {987 90% {
1010 -webkit-transform: translate3d(-20px, 0, 0);988 -webkit-transform: translate3d(-20px, 0, 0);
1011 }989 }
1012
1013 100% {990 100% {
1014 -webkit-transform: translate3d(0, 0, 0);991 -webkit-transform: translate3d(0, 0, 0);
1015 }992 }
@@ -1056,7 +1033,7 @@
1056 background: #dd4814;1033 background: #dd4814;
1057 border: 2px solid #dd4814;1034 border: 2px solid #dd4814;
1058 border-radius: 6px;1035 border-radius: 6px;
1059 color: white;1036 color: #ffffff;
1060 font-family: "Ubuntu";1037 font-family: "Ubuntu";
1061 font-size: 1rem;1038 font-size: 1rem;
1062 padding: 9px 25px;1039 padding: 9px 25px;
@@ -1066,21 +1043,21 @@
1066}1043}
1067[data-role="button"].positive {1044[data-role="button"].positive {
1068 background: #38b44a;1045 background: #38b44a;
1069 color: white;1046 color: #ffffff;
1070 border-color: #38b44a;1047 border-color: #38b44a;
1071}1048}
1072[data-role="button"].information {1049[data-role="button"].information {
1073 background: #2ab7ec;1050 background: #2ab7ec;
1074 color: white;1051 color: #ffffff;
1075 border-color: #2ab7ec;1052 border-color: #2ab7ec;
1076}1053}
1077[data-role="button"].secondary {1054[data-role="button"].secondary {
1078 background: white;1055 background: #ffffff;
1079 color: #888888;1056 color: #888888;
1080}1057}
1081[data-role="button"].negative {1058[data-role="button"].negative {
1082 background: #929292;1059 background: #929292;
1083 color: white;1060 color: #ffffff;
1084 border-color: #929292;1061 border-color: #929292;
1085}1062}
10861063
@@ -1205,14 +1182,16 @@
1205 * You should have received a copy of the GNU Lesser General Public1182 * You should have received a copy of the GNU Lesser General Public
1206 * License along with this program. If not, see1183 * License along with this program. If not, see
1207 * <http://www.gnu.org/licenses/>.1184 * <http://www.gnu.org/licenses/>.
1185 * BOXES SCALED BY A FACTOR OF 0.65
1208 */1186 */
1209label:not([for]) {1187label:not([for]) {
1210 display: inline-block;1188 display: inline-block;
1211 vertical-align: middle;1189 vertical-align: middle;
1212 width: 4.5rem;1190 width: 2.925rem;
1213 height: 2.2rem;1191 height: 2.2rem;
1214 position: relative;1192 position: relative;
1215 background: none;1193 background: none;
1194 margin-top: 15px;
1216}1195}
1217label:not([for]) input[type="checkbox"] {1196label:not([for]) input[type="checkbox"] {
1218 margin: 0;1197 margin: 0;
@@ -1230,92 +1209,92 @@
1230 left: 50%;1209 left: 50%;
1231 top: 50%;1210 top: 50%;
1232 margin: -1.1rem 0 0 -1.1rem;1211 margin: -1.1rem 0 0 -1.1rem;
1233 width: 2rem;1212 width: 1.25rem;
1234 height: 2rem;1213 height: 1.15rem;
1235 pointer-events: none;1214 pointer-events: none;
1236 border-radius: 6px;1215 border-radius: 6px;
1237 background: rgba(0, 0, 0, 0.4);1216 background: transparent;
1238 background-position-y: 30px;1217 background-position-y: 5px;
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;
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;
1241}1220}
1242label:not([for]) input[type="checkbox"]:checked + span {1221label:not([for]) input[type="checkbox"]:checked + span {
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;
1244 background-size: 75% 75%;1223 background-size: 70% 70%;
1245 background-position-y: 5px;1224 background-position-y: 5px;
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;
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;
1248}1227}
1249label:not([for]) input[type="checkbox"]:disabled + span {1228label:not([for]) input[type="checkbox"]:disabled + span {
1250 background: rgba(0, 0, 0, 0.25) !important;1229 background: rgba(0, 0, 0, 0.025) !important;
1251}1230}
1252label:not([for]) input[type="checkbox"]:disabled:checked + span {1231label:not([for]) input[type="checkbox"]:disabled:checked + span {
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;
1254 background-size: 75% 75% !important;1233 background-size: 70% 70% !important;
1255}1234}
12561235
1257label input[type="checkbox"][data-type="switch"] + span.toggle {1236label input[type="checkbox"][data-type="switch"] + span.toggle {
1258 position: absolute;1237 position: absolute;
1259 left: 50%;1238 left: 50%;
1260 top: 50%;1239 top: 50%;
1261 margin: -1.1rem 0 0 -2.2rem;1240 margin: -1.1rem 0 0 -1.2rem;
1262 width: 4.5rem;1241 width: 2.925rem;
1263 height: 2.2rem;1242 height: 1.43rem;
1264 pointer-events: none;1243 pointer-events: none;
1265 overflow: hidden;1244 overflow: hidden;
1266 background: rgba(136, 136, 136, 0.3);1245 background: rgba(136, 136, 136, 0.2);
1267}1246}
1268label input[type="checkbox"][data-type="switch"] + span.toggle > span.toggle-bg {1247label input[type="checkbox"][data-type="switch"] + span.toggle > span.toggle-bg {
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;
1270 background-size: 90% 75%;1249 background-size: 90% 80%;
1271 position: absolute;1250 position: absolute;
1272 top: 0;1251 top: 0;
1273 left: 0;1252 left: 0;
1274 z-index: 10;1253 z-index: 10;
1275 width: 4.5rem;1254 width: 2.925rem;
1276 height: 2.1rem;1255 height: 1.365rem;
1277 -webkit-transition: background-image 0.3s ease-in-out;1256 -webkit-transition: background-image 0.3s ease-in-out;
1278 transition: background-image 0.3s ease-in-out;1257 transition: background-image 0.3s ease-in-out;
1279}1258}
1280label input[type="checkbox"][data-type="switch"] + span.toggle > span.toggle-handle {1259label input[type="checkbox"][data-type="switch"] + span.toggle > span.toggle-handle {
1281 -webkit-box-sizing: border-box;1260 -webkit-box-sizing: border-box;
1282 box-sizing: border-box;1261 box-sizing: border-box;
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);
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);
1285 position: absolute;1264 position: absolute;
1286 top: 2px;1265 top: 3px;
1287 left: 2px;1266 left: 3px;
1288 z-index: 2;1267 z-index: 2;
1289 width: 2rem;1268 width: 1.1rem;
1290 height: 2rem;1269 height: 1.1rem;
1291 border-radius: 6px;1270 border-radius: 6px;
1292 background: rgba(0, 0, 0, 0.4);1271 background: rgba(0, 0, 0, 0.2);
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;
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;
1295}1274}
1296label input[type="checkbox"][data-type="switch"]:checked + span.toggle {1275label input[type="checkbox"][data-type="switch"]:checked + span.toggle {
1297 background: rgba(136, 136, 136, 0.3) !important;1276 background: rgba(136, 136, 136, 0.2) !important;
1298}1277}
1299label input[type="checkbox"][data-type="switch"]:checked + span.toggle > span.toggle-bg {1278label input[type="checkbox"][data-type="switch"]:checked + span.toggle > span.toggle-bg {
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;
1301 background-size: 90% 75%;1280 background-size: 90% 80%;
1302}1281}
1303label input[type="checkbox"][data-type="switch"]:checked + span.toggle > span.toggle-handle {1282label input[type="checkbox"][data-type="switch"]:checked + span.toggle > span.toggle-handle {
1304 background: #dd4814;1283 background: #00a132;
1305 -webkit-transform: translate3d(38px, 0, 0);1284 -webkit-transform: translate3d(24.7px, 0, 0);
1306 transform: translate3d(38px, 0, 0);1285 transform: translate3d(24.7px, 0, 0);
1307}1286}
13081287
1309label input[data-type="switch"]:disabled + span.toggle {1288label input[data-type="switch"]:disabled + span.toggle {
1310 background: rgba(136, 136, 136, 0.3) !important;1289 background: rgba(136, 136, 136, 0.03) !important;
1311}1290}
1312label input[data-type="switch"]:disabled + span.toggle > span.toggle-handle {1291label input[data-type="switch"]:disabled + span.toggle > span.toggle-handle {
1313 opacity: 0.4;1292 opacity: 0.4;
1314}1293}
1315label input[data-type="switch"]:disabled:checked + span.toggle > span.toggle-handle {1294label input[data-type="switch"]:disabled:checked + span.toggle > span.toggle-handle {
1316 opacity: 0.4;1295 opacity: 0.4;
1317 -webkit-transform: translate3d(38px, 0, 0);1296 -webkit-transform: translate3d(24.7px, 0, 0);
1318 transform: translate3d(38px, 0, 0);1297 transform: translate3d(24.7px, 0, 0);
1319}1298}
13201299
1321/*1300/*
@@ -1862,8 +1841,8 @@
1862 * <http://www.gnu.org/licenses/>.1841 * <http://www.gnu.org/licenses/>.
1863 */1842 */
1864[data-role="option-selector"] {1843[data-role="option-selector"] {
1865 -webkit-box-shadow: inset 0 2px 2px 0 #d5d5d5;1844 -webkit-box-shadow: inset 0 2px 2px 0 #D5D5D5;
1866 box-shadow: inset 0 2px 2px 0 #d5d5d5;1845 box-shadow: inset 0 2px 2px 0 #D5D5D5;
1867 width: 100%;1846 width: 100%;
1868 height: auto;1847 height: auto;
1869 margin: 0 auto;1848 margin: 0 auto;
@@ -2043,6 +2022,8 @@
2043}2022}
20442023
2045.medium-font {2024.medium-font {
2025 width: 100px;
2026 display: inline-block;
2046 font-size: 14px;2027 font-size: 14px;
2047 line-height: 1.3;2028 line-height: 1.3;
2048}2029}
@@ -2061,3 +2042,5 @@
2061 font-size: 8px;2042 font-size: 8px;
2062 line-height: 1.3;2043 line-height: 1.3;
2063}2044}
2045
2046/*# sourceMappingURL=appTemplate.css.map */
20642047
=== modified file '0.1/ambiance/css/sass/default.scss'
--- 0.1/ambiance/css/sass/default.scss 2014-08-29 00:33:51 +0000
+++ 0.1/ambiance/css/sass/default.scss 2015-12-12 11:57:23 +0000
@@ -120,6 +120,8 @@
120}120}
121121
122.medium-font {122.medium-font {
123 width: 100px;
124 display: inline-block;
123 font-size: 14px;125 font-size: 14px;
124 line-height: 1.3;126 line-height: 1.3;
125}127}
@@ -137,4 +139,4 @@
137.xxsmall-font {139.xxsmall-font {
138 font-size: 8px;140 font-size: 8px;
139 line-height: 1.3;141 line-height: 1.3;
140}
141\ No newline at end of file142\ No newline at end of file
143}
142144
=== modified file '0.1/ambiance/css/sass/toggles.scss'
--- 0.1/ambiance/css/sass/toggles.scss 2014-02-19 22:25:29 +0000
+++ 0.1/ambiance/css/sass/toggles.scss 2015-12-12 11:57:23 +0000
@@ -18,15 +18,17 @@
18 * You should have received a copy of the GNU Lesser General Public18 * You should have received a copy of the GNU Lesser General Public
19 * License along with this program. If not, see19 * License along with this program. If not, see
20 * <http://www.gnu.org/licenses/>.20 * <http://www.gnu.org/licenses/>.
21 * BOXES SCALED BY A FACTOR OF 0.65
21 */22 */
2223
23label:not([for]) {24label:not([for]) {
24 display: inline-block;25 display: inline-block;
25 vertical-align: middle;26 vertical-align: middle;
26 width: 4.5rem;27 width: 2.925rem;
27 height: 2.2rem;28 height: 2.2rem;
28 position: relative;29 position: relative;
29 background: none;30 background: none;
31 margin-top: 15px;
3032
31 input[type="checkbox"] {33 input[type="checkbox"] {
32 margin: 0;34 margin: 0;
@@ -35,6 +37,7 @@
35 top: 0;37 top: 0;
36 left: 0;38 left: 0;
3739
40
38 & + span {41 & + span {
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));
40 @include box_sizing (border-box);43 @include box_sizing (border-box);
@@ -42,20 +45,20 @@
42 left: 50%;45 left: 50%;
43 top: 50%;46 top: 50%;
44 margin: -1.1rem 0 0 -1.1rem;47 margin: -1.1rem 0 0 -1.1rem;
45 width: 2rem;48 width: 1.25rem;
46 height: 2rem;49 height: 1.15rem;
47 pointer-events: none;50 pointer-events: none;
48 border-radius: 6px;51 border-radius: 6px;
49 background: rgba(0, 0, 0, 0.4);52 background: rgba(0, 0, 0, 0.0);
50 background-position-y: 30px;53 background-position-y: 5px;
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;
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;
53 }56 }
5457
5558
56 &:checked + span {59 &:checked + span {
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;
58 background-size: 75% 75%;61 background-size: 70% 70%;
59 background-position-y: 5px;62 background-position-y: 5px;
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;
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;
@@ -63,12 +66,12 @@
6366
64 &:disabled {67 &:disabled {
65 + span {68 + span {
66 background: rgba(0, 0, 0, 0.25)!important;69 background: rgba(0, 0, 0, 0.025)!important;
67 }70 }
6871
69 &:checked + span {72 &:checked + span {
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;
71 background-size: 75% 75%!important;74 background-size: 70% 70%!important;
72 }75 }
73 }76 }
74 }77 }
@@ -79,61 +82,61 @@
79 position: absolute;82 position: absolute;
80 left: 50%;83 left: 50%;
81 top: 50%;84 top: 50%;
82 margin: -1.1rem 0 0 -2.2rem;85 margin: -1.1rem 0 0 -1.2rem;
83 width: 4.5rem;86 width: 2.925rem;
84 height: 2.2rem;87 height: 1.43rem;
85 pointer-events: none;88 pointer-events: none;
86 overflow: hidden;89 overflow: hidden;
87 background: rgba(136, 136, 136, 0.3);90 background: rgba(136, 136, 136, 0.2);
8891
89 > span.toggle-bg {92 > span.toggle-bg {
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;
91 background-size: 90% 75%;94 background-size: 90% 80%;
92 position: absolute;95 position: absolute;
93 top: 0;96 top: 0;
94 left: 0;97 left: 0;
95 z-index: 10;98 z-index: 10;
96 width: 4.5rem;99 width: 2.925rem;
97 height: 2.1rem;100 height: 1.365rem;
98 -webkit-transition: background-image 0.3s ease-in-out;101 -webkit-transition: background-image 0.3s ease-in-out;
99 transition: background-image 0.3s ease-in-out;102 transition: background-image 0.3s ease-in-out;
100 }103 }
101104
102 > span.toggle-handle {105 > span.toggle-handle {
103 @include box_sizing (border-box);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 position: absolute;108 position: absolute;
106 top: 2px;109 top: 3px;
107 left: 2px;110 left: 3px;
108 z-index: 2;111 z-index: 2;
109 width: 2rem;112 width: 1.1rem;
110 height: 2rem;113 height: 1.1rem;
111 border-radius: 6px;114 border-radius: 6px;
112 background: rgba(0, 0, 0, 0.4);115 background: rgba(0, 0, 0, 0.2);
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;
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;
115 }118 }
116 }119 }
117120
118 &:checked + span.toggle {121 &:checked + span.toggle {
119 background: rgba(136, 136, 136, 0.3) !important;122 background: rgba(136, 136, 136, 0.2) !important;
120123
121 > span.toggle-bg {124 > span.toggle-bg {
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;
123 background-size: 90% 75%;126 background-size: 90% 80%;
124 }127 }
125128
126 > span.toggle-handle {129 > span.toggle-handle {
127 background: rgb(221, 72, 20);130 background: rgba(0,161,50, 255);
128 -webkit-transform: translate3d(38px, 0, 0);131 -webkit-transform: translate3d(24.7px, 0, 0);
129 transform: translate3d(38px, 0, 0);132 transform: translate3d(24.7px, 0, 0);
130 }133 }
131 }134 }
132}135}
133136
134label input[data-type="switch"]:disabled {137label input[data-type="switch"]:disabled {
135 + span.toggle {138 + span.toggle {
136 background: rgba(136, 136, 136, 0.3) !important;139 background: rgba(136, 136, 136, 0.03) !important;
137140
138 > span.toggle-handle {141 > span.toggle-handle {
139 opacity: 0.4;142 opacity: 0.4;
@@ -142,7 +145,7 @@
142145
143 &:checked + span.toggle > span.toggle-handle {146 &:checked + span.toggle > span.toggle-handle {
144 opacity: 0.4;147 opacity: 0.4;
145 -webkit-transform: translate3d(38px, 0, 0);148 -webkit-transform: translate3d(24.7px, 0, 0);
146 transform: translate3d(38px, 0, 0);149 transform: translate3d(24.7px, 0, 0);
147 }150 }
148}
149\ No newline at end of file151\ No newline at end of file
152}
150153
=== modified file 'examples/html5-theme/widgets/Toggles.html'
--- examples/html5-theme/widgets/Toggles.html 2014-02-12 19:46:04 +0000
+++ examples/html5-theme/widgets/Toggles.html 2015-12-12 11:57:23 +0000
@@ -44,14 +44,14 @@
4444
45 <div class="inset">45 <div class="inset">
46 <span class="medium-font">Unchecked</span>46 <span class="medium-font">Unchecked</span>
47 <label>47 <label class="checkbox">
48 <input type="checkbox">48 <input type="checkbox">
49 <span></span>49 <span class="checkbox"></span>
50 </label>50 </label>
51 </div>51 </div>
52 <div>52 <div class="inset">
53 <span class="medium-font">Checked</span>53 <span class="medium-font">Checked</span>
54 <label>54 <label class="checkbox">
55 <input type="checkbox" checked="">55 <input type="checkbox" checked="">
56 <span></span>56 <span></span>
57 </label>57 </label>
@@ -60,7 +60,7 @@
60 <div>60 <div>
61 <span class="medium-font">Disabled</span>61 <span class="medium-font">Disabled</span>
62 <div class="inset" style="display:inline">62 <div class="inset" style="display:inline">
63 <label>63 <label class="checkbox">
64 <input type="checkbox" checked="" disabled="">64 <input type="checkbox" checked="" disabled="">
65 <span></span>65 <span></span>
66 </label>66 </label>
@@ -131,3 +131,4 @@
131 </div>131 </div>
132</body>132</body>
133</html>133</html>
134

Subscribers

People subscribed via source and target branches