Merge lp:~abreu-alexandre/ubuntu-html5-theme/bug-fix-meta-package into lp:ubuntu-html5-theme

Proposed by Alexandre Abreu
Status: Merged
Approved by: Alexandre Abreu
Approved revision: 191
Merged at revision: 188
Proposed branch: lp:~abreu-alexandre/ubuntu-html5-theme/bug-fix-meta-package
Merge into: lp:ubuntu-html5-theme
Diff against target: 923 lines (+279/-176)
11 files modified
0.1/ambiance/css/appTemplate.css (+98/-60)
0.1/ambiance/css/sass/constants.scss (+13/-4)
0.1/ambiance/css/sass/listitems.scss (+11/-5)
0.1/ambiance/css/sass/shapes.scss (+3/-3)
0.1/ambiance/css/sass/sliders.scss (+68/-17)
0.1/ambiance/css/sass/tabs.scss (+3/-3)
0.1/ambiance/css/sass/toolbars.scss (+2/-1)
0.1/ambiance/js/list.js (+5/-5)
examples/html5-theme/widgets/ListItems.html (+28/-28)
examples/html5-theme/widgets/Sliders.html (+8/-8)
examples/html5-theme/widgets/UbuntuShape.html (+40/-42)
To merge this branch: bzr merge lp:~abreu-alexandre/ubuntu-html5-theme/bug-fix-meta-package
Reviewer Review Type Date Requested Status
Ubuntu HTML5 Theme Developers Pending
Review via email: mp+246483@code.launchpad.net
To post a comment you must log in.

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 2014-05-25 18:51:21 +0000
+++ 0.1/ambiance/css/appTemplate.css 2015-01-14 19:02:01 +0000
@@ -48,6 +48,9 @@
48 * Font family48 * Font family
49 */49 */
50/*50/*
51 * Slider
52 */
53/*
51 * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>54 * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
52 * License granted by Canonical Limited55 * License granted by Canonical Limited
53 *56 *
@@ -221,7 +224,7 @@
221 display: block;224 display: block;
222}225}
223[data-role="header"] .active {226[data-role="header"] .active {
224 color: #484647;227 color: #888888;
225 padding-left: 15px;228 padding-left: 15px;
226 -webkit-opacity: 1;229 -webkit-opacity: 1;
227 opacity: 1;230 opacity: 1;
@@ -245,8 +248,8 @@
245248
246[data-role="tabitem"] {249[data-role="tabitem"] {
247 display: inline-block;250 display: inline-block;
248 font: 35px "Ubuntu";251 font: 33px "Ubuntu";
249 letter-spacing: -1px;252 font-weight: 100;
250 line-height: 60px;253 line-height: 60px;
251 padding-right: 35px;254 padding-right: 35px;
252 text-decoration: none;255 text-decoration: none;
@@ -442,7 +445,7 @@
442}445}
443446
444.textfield.clear:focus {447.textfield.clear:focus {
445 background: url(artwork/icon_clear@20.png) no-repeat 97% center white;448 background: url(artwork/icon_clear@20.png) no-repeat 97% center #fff;
446 background-size: 12%;449 background-size: 12%;
447}450}
448451
@@ -555,7 +558,6 @@
555 from {558 from {
556 -webkit-transform: rotate(1deg);559 -webkit-transform: rotate(1deg);
557 }560 }
558
559 to {561 to {
560 -webkit-transform: rotate(360deg);562 -webkit-transform: rotate(360deg);
561 }563 }
@@ -564,11 +566,9 @@
564 0% {566 0% {
565 opacity: 0;567 opacity: 0;
566 }568 }
567
568 50% {569 50% {
569 opacity: 1;570 opacity: 1;
570 }571 }
571
572 100% {572 100% {
573 opacity: 0;573 opacity: 0;
574 }574 }
@@ -698,43 +698,33 @@
698 0% {698 0% {
699 -webkit-transform: translate3d(0, 0, 0);699 -webkit-transform: translate3d(0, 0, 0);
700 }700 }
701
702 10% {701 10% {
703 -webkit-transform: translate3d(-20px, 0, 0);702 -webkit-transform: translate3d(-20px, 0, 0);
704 }703 }
705
706 20% {704 20% {
707 -webkit-transform: translate3d(20px, 0, 0);705 -webkit-transform: translate3d(20px, 0, 0);
708 }706 }
709
710 30% {707 30% {
711 -webkit-transform: translate3d(-20px, 0, 0);708 -webkit-transform: translate3d(-20px, 0, 0);
712 }709 }
713
714 40% {710 40% {
715 -webkit-transform: translate3d(20px, 0, 0);711 -webkit-transform: translate3d(20px, 0, 0);
716 }712 }
717
718 50% {713 50% {
719 -webkit-transform: translate3d(-20px, 0, 0);714 -webkit-transform: translate3d(-20px, 0, 0);
720 }715 }
721
722 60% {716 60% {
723 -webkit-transform: translate3d(20px, 0, 0);717 -webkit-transform: translate3d(20px, 0, 0);
724 }718 }
725
726 70% {719 70% {
727 -webkit-transform: translate3d(-20px, 0, 0);720 -webkit-transform: translate3d(-20px, 0, 0);
728 }721 }
729
730 80% {722 80% {
731 -webkit-transform: translate3d(20px, 0, 0);723 -webkit-transform: translate3d(20px, 0, 0);
732 }724 }
733
734 90% {725 90% {
735 -webkit-transform: translate3d(-20px, 0, 0);726 -webkit-transform: translate3d(-20px, 0, 0);
736 }727 }
737
738 100% {728 100% {
739 -webkit-transform: translate3d(0, 0, 0);729 -webkit-transform: translate3d(0, 0, 0);
740 }730 }
@@ -743,43 +733,33 @@
743 0% {733 0% {
744 -webkit-transform: translate3d(0, 0, 0);734 -webkit-transform: translate3d(0, 0, 0);
745 }735 }
746
747 10% {736 10% {
748 -webkit-transform: translate3d(-20px, 0, 0);737 -webkit-transform: translate3d(-20px, 0, 0);
749 }738 }
750
751 20% {739 20% {
752 -webkit-transform: translate3d(20px, 0, 0);740 -webkit-transform: translate3d(20px, 0, 0);
753 }741 }
754
755 30% {742 30% {
756 -webkit-transform: translate3d(-20px, 0, 0);743 -webkit-transform: translate3d(-20px, 0, 0);
757 }744 }
758
759 40% {745 40% {
760 -webkit-transform: translate3d(20px, 0, 0);746 -webkit-transform: translate3d(20px, 0, 0);
761 }747 }
762
763 50% {748 50% {
764 -webkit-transform: translate3d(-20px, 0, 0);749 -webkit-transform: translate3d(-20px, 0, 0);
765 }750 }
766
767 60% {751 60% {
768 -webkit-transform: translate3d(20px, 0, 0);752 -webkit-transform: translate3d(20px, 0, 0);
769 }753 }
770
771 70% {754 70% {
772 -webkit-transform: translate3d(-20px, 0, 0);755 -webkit-transform: translate3d(-20px, 0, 0);
773 }756 }
774
775 80% {757 80% {
776 -webkit-transform: translate3d(20px, 0, 0);758 -webkit-transform: translate3d(20px, 0, 0);
777 }759 }
778
779 90% {760 90% {
780 -webkit-transform: translate3d(-20px, 0, 0);761 -webkit-transform: translate3d(-20px, 0, 0);
781 }762 }
782
783 100% {763 100% {
784 -webkit-transform: translate3d(0, 0, 0);764 -webkit-transform: translate3d(0, 0, 0);
785 }765 }
@@ -826,7 +806,7 @@
826 background: #dd4814;806 background: #dd4814;
827 border: 2px solid #dd4814;807 border: 2px solid #dd4814;
828 border-radius: 6px;808 border-radius: 6px;
829 color: white;809 color: #ffffff;
830 font-family: "Ubuntu";810 font-family: "Ubuntu";
831 font-size: 1rem;811 font-size: 1rem;
832 padding: 9px 25px;812 padding: 9px 25px;
@@ -836,21 +816,21 @@
836}816}
837[data-role="button"].positive {817[data-role="button"].positive {
838 background: #38b44a;818 background: #38b44a;
839 color: white;819 color: #ffffff;
840 border-color: #38b44a;820 border-color: #38b44a;
841}821}
842[data-role="button"].information {822[data-role="button"].information {
843 background: #2ab7ec;823 background: #2ab7ec;
844 color: white;824 color: #ffffff;
845 border-color: #2ab7ec;825 border-color: #2ab7ec;
846}826}
847[data-role="button"].secondary {827[data-role="button"].secondary {
848 background: white;828 background: #ffffff;
849 color: #888888;829 color: #888888;
850}830}
851[data-role="button"].negative {831[data-role="button"].negative {
852 background: #b2b2b2;832 background: #b2b2b2;
853 color: white;833 color: #ffffff;
854 border-color: #b2b2b2;834 border-color: #b2b2b2;
855}835}
856836
@@ -878,31 +858,81 @@
878/* ----------------------------------858/* ----------------------------------
879 * Sliders859 * Sliders
880 * ---------------------------------- */860 * ---------------------------------- */
881/**
882 TODO: remove absolte values for w/h
883 */
884input[type=range] {861input[type=range] {
885 -webkit-box-sizing: border-box;862 -webkit-box-sizing: border-box;
886 box-sizing: border-box;863 box-sizing: border-box;
887 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);864 -webkit-appearance: none;
888 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);865 background: linear-gradient(to right, rgba(175, 175, 175, 0.3) 0%, rgba(175, 175, 175, 0.3) 100%);
889 -webkit-appearance: none;866 background-position: center;
890 background-color: rgba(192, 192, 192, 0.1);867 background-size: 99% 4px;
891 width: 200px;868 background-repeat: no-repeat;
892 height: 35px;869 -webkit-appearance: none;
893 border-radius: 6px;870 width: auto;
894 padding: 5px 0;871 height: 36px;
872 border-radius: 1px;
873 overflow: hidden;
874 margin-top: 5px;
875 margin-bottom: 5px;
876 /*&::-moz-range-thumb:before {
877 position: absolute;
878 top: ($range-slider-height / 2) - ($range-track-height / 2);
879 left: -2000px;
880 width: 2000px;
881 height: $range-track-height;
882 background: $ubuntu_orange;
883 content: ' ';
884 }*/
895}885}
896input[type=range]::-webkit-slider-thumb {886input[type=range]::-webkit-slider-thumb {
897 -webkit-box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.1);887 -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
898 box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.1);888 box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
899 -webkit-box-sizing: border-box;889 -webkit-box-sizing: border-box;
900 box-sizing: border-box;890 box-sizing: border-box;
901 -webkit-appearance: none;891 -webkit-appearance: none;
902 background-color: #dd4814;892 background-color: #fff;
903 border-radius: 6px;893 pointer-events: none;
904 width: 30px;894 border-radius: 3px;
905 height: 27px;895 width: 16px;
896 height: 16px;
897 position: relative;
898}
899input[type=range]::-webkit-slider-thumb:before {
900 /* what creates the colorful line on the left side of the slider */
901 position: absolute;
902 top: 6px;
903 left: -2000px;
904 width: 2000px;
905 height: 4px;
906 background: #dd4814;
907 content: ' ';
908}
909input[type=range]::-moz-range-track {
910 -webkit-box-sizing: border-box;
911 box-sizing: border-box;
912 background: -moz-linear-gradient(to right, rgba(175, 175, 175, 0.3) 0%, rgba(175, 175, 175, 0.3) 100%);
913 background-position: center;
914 background-size: 99% 4px;
915 background-repeat: no-repeat;
916 width: auto;
917 height: 36px;
918 border: 0;
919 border-radius: 1px;
920 overflow: hidden;
921 margin-top: 5px;
922 margin-bottom: 5px;
923}
924input[type=range]::-moz-range-thumb {
925 -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
926 box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
927 -webkit-box-sizing: border-box;
928 box-sizing: border-box;
929 background: #fff;
930 pointer-events: none;
931 border: 0;
932 border-radius: 3px;
933 width: 16px;
934 height: 16px;
935 position: relative;
906}936}
907937
908/*938/*
@@ -1199,7 +1229,7 @@
1199 -webkit-box-sizing: border-box;1229 -webkit-box-sizing: border-box;
1200 box-sizing: border-box;1230 box-sizing: border-box;
1201 width: 100%;1231 width: 100%;
1202 height: 3.5rem;1232 height: 3.1rem;
1203 border-bottom: solid 0.1rem #c7c7c7;1233 border-bottom: solid 0.1rem #c7c7c7;
1204 color: #787878;1234 color: #787878;
1205 position: relative;1235 position: relative;
@@ -1208,10 +1238,10 @@
1208 text-decoration: none;1238 text-decoration: none;
1209 color: #787878;1239 color: #787878;
1210 display: block;1240 display: block;
1211 height: 3.4rem;1241 height: 3rem;
1212 position: relative;1242 position: relative;
1213 border: none;1243 border: none;
1214 line-height: 3.4rem;1244 line-height: 3rem;
1215 padding-left: 1rem;1245 padding-left: 1rem;
1216 padding-right: 1.5rem;1246 padding-right: 1.5rem;
1217 border-top: 1px solid #ebebeb;1247 border-top: 1px solid #ebebeb;
@@ -1229,7 +1259,7 @@
1229 height: 2rem;1259 height: 2rem;
1230 top: 50%;1260 top: 50%;
1231 right: 0;1261 right: 0;
1232 margin-top: -1rem;1262 margin-top: -1.2rem;
1233 z-index: 0;1263 z-index: 0;
1234}1264}
1235[data-role="list"] ul li > a:active {1265[data-role="list"] ul li > a:active {
@@ -1249,7 +1279,12 @@
1249 line-height: 1rem;1279 line-height: 1rem;
1250}1280}
1251[data-role="list"] ul li p:only-child, [data-role="list"] ul li p:first-of-type:last-of-type {1281[data-role="list"] ul li p:only-child, [data-role="list"] ul li p:first-of-type:last-of-type {
1252 line-height: 2.5rem;1282 line-height: 2.1rem;
1283}
1284[data-role="list"] ul li p + p {
1285 color: rgba(136, 136, 136, 0.8);
1286 padding-top: 0.1rem;
1287 font-size: 0.8rem;
1253}1288}
1254[data-role="list"] ul li > label {1289[data-role="list"] ul li > label {
1255 z-index: 100;1290 z-index: 100;
@@ -1336,6 +1371,7 @@
1336}1371}
1337[data-role="footer"] nav ul {1372[data-role="footer"] nav ul {
1338 list-style: none;1373 list-style: none;
1374 text-align: right;
1339}1375}
1340[data-role="footer"] nav ul li,1376[data-role="footer"] nav ul li,
1341[data-role="footer"] nav ul li a {1377[data-role="footer"] nav ul li a {
@@ -1343,7 +1379,7 @@
1343 font-size: 0.6rem;1379 font-size: 0.6rem;
1344 text-align: center;1380 text-align: center;
1345 width: 60px;1381 width: 60px;
1346 float: right;1382 display: inline-block;
1347 text-decoration: none;1383 text-decoration: none;
1348}1384}
1349[data-role="footer"] nav ul li {1385[data-role="footer"] nav ul li {
@@ -1394,7 +1430,7 @@
1394 z-index: 100;1430 z-index: 100;
1395}1431}
1396[data-role="shape"]:after {1432[data-role="shape"]:after {
1397 background: url(../img/ubuntushape_medium_radius_idle@18.png) no-repeat;1433 background: url(../img/ubuntushape.png) no-repeat;
1398 background-size: 100% 100%;1434 background-size: 100% 100%;
1399 content: ' ';1435 content: ' ';
1400 width: 100%;1436 width: 100%;
@@ -1406,14 +1442,14 @@
1406[data-role="shape"] img {1442[data-role="shape"] img {
1407 height: 100%;1443 height: 100%;
1408 width: 100%;1444 width: 100%;
1409 border-radius: 1.5rem;1445 max-width: 100% !important;
1410 margin-bottom: 0;1446 margin-bottom: 0;
1411 display: inline-block;1447 display: inline-block;
1412}1448}
1413[data-role="shape"] div {1449[data-role="shape"] div {
1414 height: 100%;1450 height: 100%;
1415 width: 100%;1451 width: 100%;
1416 border-radius: 1.5rem;1452 border-radius: 1rem;
1417 margin-bottom: 0;1453 margin-bottom: 0;
1418 display: inline-block;1454 display: inline-block;
1419}1455}
@@ -1496,8 +1532,8 @@
1496 * <http://www.gnu.org/licenses/>.1532 * <http://www.gnu.org/licenses/>.
1497 */1533 */
1498[data-role="option-selector"] {1534[data-role="option-selector"] {
1499 -webkit-box-shadow: inset 0 2px 2px 0 #d5d5d5;1535 -webkit-box-shadow: inset 0 2px 2px 0 #D5D5D5;
1500 box-shadow: inset 0 2px 2px 0 #d5d5d5;1536 box-shadow: inset 0 2px 2px 0 #D5D5D5;
1501 width: 100%;1537 width: 100%;
1502 height: auto;1538 height: auto;
1503 margin: 0 auto;1539 margin: 0 auto;
@@ -1689,3 +1725,5 @@
1689 font-size: 8px;1725 font-size: 8px;
1690 line-height: 1.3;1726 line-height: 1.3;
1691}1727}
1728
1729/*# sourceMappingURL=appTemplate.css.map */
16921730
=== modified file '0.1/ambiance/css/sass/constants.scss'
--- 0.1/ambiance/css/sass/constants.scss 2014-02-24 22:24:41 +0000
+++ 0.1/ambiance/css/sass/constants.scss 2015-01-14 19:02:01 +0000
@@ -20,9 +20,9 @@
20 * <http://www.gnu.org/licenses/>20 * <http://www.gnu.org/licenses/>
21 */21 */
2222
23 /*23/*
24 * Colours24 * Colours
25 */25 */
26$ubuntu_orange: #dd4814;26$ubuntu_orange: #dd4814;
27$text_color: #787878;27$text_color: #787878;
28$cream: #f3f3e7;28$cream: #f3f3e7;
@@ -36,4 +36,13 @@
36 * Font family36 * Font family
37 */37 */
3838
39$font_family: "Ubuntu";
40\ No newline at end of file39\ No newline at end of file
40$font_family: "Ubuntu";
41
42/*
43 * Slider
44 */
45
46$range-track-height: 4px !default;
47$range-slider-width: 16px !default;
48$range-slider-height: 16px !default;
49$range-slider-border-radius: 1px !default;
4150
=== modified file '0.1/ambiance/css/sass/listitems.scss'
--- 0.1/ambiance/css/sass/listitems.scss 2014-02-24 17:08:30 +0000
+++ 0.1/ambiance/css/sass/listitems.scss 2015-01-14 19:02:01 +0000
@@ -42,7 +42,7 @@
42 li {42 li {
43 @include box_sizing (border-box);43 @include box_sizing (border-box);
44 width: 100%;44 width: 100%;
45 height: 3.5rem;45 height: 3.1rem;
46 border-bottom: solid 0.1rem #c7c7c7;46 border-bottom: solid 0.1rem #c7c7c7;
47 color: $text_color;47 color: $text_color;
48 position: relative;48 position: relative;
@@ -51,10 +51,10 @@
51 text-decoration: none;51 text-decoration: none;
52 color: $text_color;52 color: $text_color;
53 display: block;53 display: block;
54 height: 3.4rem;54 height: 3rem;
55 position: relative;55 position: relative;
56 border: none;56 border: none;
57 line-height: 3.4rem;57 line-height: 3rem;
58 padding-left: 1rem;58 padding-left: 1rem;
59 padding-right: 1.5rem;59 padding-right: 1.5rem;
60 border-top: 1px solid #ebebeb;60 border-top: 1px solid #ebebeb;
@@ -72,7 +72,7 @@
72 height: 2rem;72 height: 2rem;
73 top: 50%;73 top: 50%;
74 right: 0;74 right: 0;
75 margin-top: -1rem;75 margin-top: -1.2rem;
76 z-index: 0;76 z-index: 0;
77 }77 }
7878
@@ -96,7 +96,13 @@
9696
97 &:only-child,97 &:only-child,
98 &:first-of-type:last-of-type {98 &:first-of-type:last-of-type {
99 line-height: 2.5rem;99 line-height: 2.1rem;
100 }
101
102 & + p {
103 color: rgba(136, 136, 136, 0.8);
104 padding-top: 0.1rem;
105 font-size: 0.8rem
100 }106 }
101 }107 }
102108
103109
=== modified file '0.1/ambiance/css/sass/shapes.scss'
--- 0.1/ambiance/css/sass/shapes.scss 2014-02-17 16:25:38 +0000
+++ 0.1/ambiance/css/sass/shapes.scss 2015-01-14 19:02:01 +0000
@@ -34,7 +34,7 @@
34 z-index: 100;34 z-index: 100;
3535
36 &:after {36 &:after {
37 background: url(../img/ubuntushape_medium_radius_idle@18.png) no-repeat;37 background: url(../img/ubuntushape.png) no-repeat;
38 background-size: 100% 100%;38 background-size: 100% 100%;
39 content: ' ';39 content: ' ';
40 width: 100%;40 width: 100%;
@@ -47,7 +47,7 @@
47 img {47 img {
48 height: 100%;48 height: 100%;
49 width: 100%;49 width: 100%;
50 border-radius: 1.5rem;50 max-width: 100%!important;
51 margin-bottom: 0;51 margin-bottom: 0;
52 display: inline-block;52 display: inline-block;
53 }53 }
@@ -55,7 +55,7 @@
55 div {55 div {
56 height: 100%;56 height: 100%;
57 width: 100%;57 width: 100%;
58 border-radius: 1.5rem;58 border-radius: 1rem;
59 margin-bottom: 0;59 margin-bottom: 0;
60 display: inline-block;60 display: inline-block;
61 }61 }
6262
=== modified file '0.1/ambiance/css/sass/sliders.scss'
--- 0.1/ambiance/css/sass/sliders.scss 2014-02-17 16:25:38 +0000
+++ 0.1/ambiance/css/sass/sliders.scss 2015-01-14 19:02:01 +0000
@@ -24,27 +24,78 @@
24 * Sliders24 * Sliders
25 * ---------------------------------- */25 * ---------------------------------- */
2626
27/**
28 TODO: remove absolte values for w/h
29 */
30
31input[type=range] {27input[type=range] {
32 @include box_sizing (border-box);28 @include box_sizing (border-box);
33 @include box_shadow (inset 0 1px 1px rgba(0, 0, 0, 0.1));29 -webkit-appearance: none;
34 -webkit-appearance: none;30 background: linear-gradient(to right, rgba(175, 175, 175, 0.30) 0%, rgba(175, 175, 175, 0.30) 100%);
35 background-color: rgba(192, 192, 192, 0.1);31 background-position: center;
36 width: 200px;32 background-size: 99% 4px;
37 height: 35px;33 background-repeat: no-repeat;
38 border-radius: 6px;34 -webkit-appearance: none;
39 padding: 5px 0;35 width: auto;
36 height: $range-slider-height + 20;
37 border-radius: $range-slider-border-radius;
38 overflow: hidden;
39 margin-top: 5px;
40 margin-bottom: 5px;
4041
41 &::-webkit-slider-thumb {42 &::-webkit-slider-thumb {
42 @include box_shadow (inset 0 2px 1px rgba(0, 0, 0, 0.1));43 @include box_shadow (inset 0 1px 0 rgba(0, 0, 0, 0.2));
43 @include box_sizing (border-box);44 @include box_sizing (border-box);
44 -webkit-appearance: none;45 -webkit-appearance: none;
45 background-color: $ubuntu_orange;46 background-color: #fff;
46 border-radius: 6px;47 pointer-events: none;
47 width: 30px;48 border-radius: 3px;
48 height: 27px;49 width: $range-slider-width;
49 }50 height: $range-slider-height;
51 position: relative;
52 }
53
54 &::-webkit-slider-thumb:before {
55 /* what creates the colorful line on the left side of the slider */
56 position: absolute;
57 top: ($range-slider-height / 2) - ($range-track-height / 2);
58 left: -2000px;
59 width: 2000px;
60 height: $range-track-height;
61 background: $ubuntu_orange;
62 content: ' ';
63 }
64
65 &::-moz-range-track {
66 @include box_sizing (border-box);
67 background: -moz-linear-gradient(to right, rgba(175, 175, 175, 0.30) 0%, rgba(175, 175, 175, 0.30) 100%);
68 background-position: center;
69 background-size: 99% 4px;
70 background-repeat: no-repeat;
71 width: auto;
72 height: $range-slider-height + 20;
73 border: 0;
74 border-radius: $range-slider-border-radius;
75 overflow: hidden;
76 margin-top: 5px;
77 margin-bottom: 5px;
78 }
79
80 &::-moz-range-thumb {
81 @include box_shadow (inset 0 1px 0 rgba(0, 0, 0, 0.2));
82 @include box_sizing (border-box);
83 background: #fff;
84 pointer-events: none;
85 border: 0;
86 border-radius: 3px;
87 width: $range-slider-width;
88 height: $range-slider-height;
89 position: relative;
90 }
91
92 /*&::-moz-range-thumb:before {
93 position: absolute;
94 top: ($range-slider-height / 2) - ($range-track-height / 2);
95 left: -2000px;
96 width: 2000px;
97 height: $range-track-height;
98 background: $ubuntu_orange;
99 content: ' ';
100 }*/
50}101}
51102
=== modified file '0.1/ambiance/css/sass/tabs.scss'
--- 0.1/ambiance/css/sass/tabs.scss 2014-02-28 22:05:37 +0000
+++ 0.1/ambiance/css/sass/tabs.scss 2015-01-14 19:02:01 +0000
@@ -41,7 +41,7 @@
41 }41 }
4242
43 .active {43 .active {
44 color: #484647;44 color: #888888;
45 padding-left: 15px;45 padding-left: 15px;
46 -webkit-opacity: 1;46 -webkit-opacity: 1;
47 opacity: 1;47 opacity: 1;
@@ -68,8 +68,8 @@
6868
69[data-role="tabitem"] {69[data-role="tabitem"] {
70 display: inline-block;70 display: inline-block;
71 font: 35px $font_family;71 font: 33px $font_family;
72 letter-spacing: -1px;72 font-weight: 100;
73 line-height: 60px;73 line-height: 60px;
74 padding-right: 35px;74 padding-right: 35px;
75 text-decoration: none;75 text-decoration: none;
7676
=== modified file '0.1/ambiance/css/sass/toolbars.scss'
--- 0.1/ambiance/css/sass/toolbars.scss 2014-02-20 20:37:13 +0000
+++ 0.1/ambiance/css/sass/toolbars.scss 2015-01-14 19:02:01 +0000
@@ -49,6 +49,7 @@
4949
50 ul {50 ul {
51 list-style: none;51 list-style: none;
52 text-align: right;
5253
53 li,54 li,
54 li a {55 li a {
@@ -56,7 +57,7 @@
56 font-size: 0.6rem;57 font-size: 0.6rem;
57 text-align: center;58 text-align: center;
58 width: 60px;59 width: 60px;
59 float: right;60 display: inline-block;
60 text-decoration: none;61 text-decoration: none;
61 }62 }
62 li {63 li {
6364
=== added file '0.1/ambiance/img/ubuntushape.png'
64Binary files 0.1/ambiance/img/ubuntushape.png 1970-01-01 00:00:00 +0000 and 0.1/ambiance/img/ubuntushape.png 2015-01-14 19:02:01 +0000 differ65Binary files 0.1/ambiance/img/ubuntushape.png 1970-01-01 00:00:00 +0000 and 0.1/ambiance/img/ubuntushape.png 2015-01-14 19:02:01 +0000 differ
=== modified file '0.1/ambiance/js/list.js'
--- 0.1/ambiance/js/list.js 2014-02-28 20:29:07 +0000
+++ 0.1/ambiance/js/list.js 2015-01-14 19:02:01 +0000
@@ -78,7 +78,7 @@
78 * Add or Set the List Header78 * Add or Set the List Header
79 * @method setHeader79 * @method setHeader
80 * @param {String} text - The header text80 * @param {String} text - The header text
81 */ 81 */
82 setHeader: function (text) {82 setHeader: function (text) {
83 if (typeof (text) == 'string') {83 if (typeof (text) == 'string') {
84 var header = this._list.querySelectorAll('header');84 var header = this._list.querySelectorAll('header');
@@ -96,7 +96,7 @@
96 if (!header)96 if (!header)
97 header = document.createElement('header');97 header = document.createElement('header');
9898
99 header.innerText = text;99 header.textContent = text;
100 }100 }
101 },101 },
102 /**102 /**
@@ -122,12 +122,12 @@
122 });122 });
123 }123 }
124 //FIXME: no real checks on text content124 //FIXME: no real checks on text content
125 a.innerText = text;125 a.textContent = text;
126 li.appendChild(a);126 li.appendChild(a);
127127
128 if (label && typeof (label) == 'string') {128 if (label && typeof (label) == 'string') {
129 var n = document.createElement('label');129 var n = document.createElement('label');
130 n.innerText = label;130 n.textContent = label;
131 li.appendChild(n);131 li.appendChild(n);
132 }132 }
133133
@@ -143,7 +143,7 @@
143 * Gets a list item &lt;li&gt; by its index, where index counting starts from 1143 * Gets a list item &lt;li&gt; by its index, where index counting starts from 1
144 * @method at144 * @method at
145 * @param {Number} index145 * @param {Number} index
146 * @return The list item, or null on failure 146 * @return The list item, or null on failure
147 */147 */
148 at: function (index) {148 at: function (index) {
149 if (typeof (index) != 'number')149 if (typeof (index) != 'number')
150150
=== modified file 'examples/html5-theme/widgets/ListItems.html'
--- examples/html5-theme/widgets/ListItems.html 2014-02-12 19:46:04 +0000
+++ examples/html5-theme/widgets/ListItems.html 2015-01-14 19:02:01 +0000
@@ -5,18 +5,18 @@
5 This file is part of ubuntu-html5-ui-toolkit.5 This file is part of ubuntu-html5-ui-toolkit.
66
7 This package is free software; you can redistribute it and/or modify7 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 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 9 published by the Free Software Foundation; either version 3 of the
10 License, or10 License, or
11 (at your option) any later version.11 (at your option) any later version.
12 12
13 This package is distributed in the hope that it will be useful,13 This package is distributed in the hope that it will be useful,
14 but WITHOUT ANY WARRANTY; without even the implied warranty of14 but WITHOUT ANY WARRANTY; without even the implied warranty of
15 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the15 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16 GNU General Public License for more details.16 GNU General Public License for more details.
17 17
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
19 License along with this program. If not, see 19 License along with this program. If not, see
20 <http://www.gnu.org/licenses/>.20 <http://www.gnu.org/licenses/>.
21-->21-->
2222
@@ -54,15 +54,15 @@
54 <ul data-role="listview">54 <ul data-role="listview">
55 <li>55 <li>
56 <p>Label</p>56 <p>Label</p>
57 <p class="small-font">Secondary Label</p>57 <p>Secondary Label</p>
58 </li>58 </li>
59 <li>59 <li>
60 <p>Label</p>60 <p>Label</p>
61 <p class="small-font">Secondary Label</p>61 <p>Secondary Label</p>
62 </li>62 </li>
63 <li>63 <li>
64 <p>Label</p>64 <p>Label</p>
65 <p class="small-font">Secondary Label</p>65 <p>Secondary Label</p>
66 </li>66 </li>
67 </ul>67 </ul>
68 </section>68 </section>
@@ -72,19 +72,19 @@
72 <ul data-role="listview">72 <ul data-role="listview">
73 <li>73 <li>
74 <p>Label</p>74 <p>Label</p>
75 <p class="small-font">Value 1, Value 2</p>75 <p>Value 1, Value 2</p>
76 </li>76 </li>
77 <li>77 <li>
78 <p>Label</p>78 <p>Label</p>
79 <p class="small-font">Value 1, Value 2</p>79 <p>Value 1, Value 2</p>
80 </li>80 </li>
81 <li>81 <li>
82 <p>Label</p>82 <p>Label</p>
83 <p class="small-font">Value 1, Value 2</p>83 <p>Value 1, Value 2</p>
84 </li>84 </li>
85 <li>85 <li>
86 <p>Label</p>86 <p>Label</p>
87 <p class="small-font">Value 1, Value 2</p>87 <p>Value 1, Value 2</p>
88 </li>88 </li>
89 </ul>89 </ul>
90 </section>90 </section>
9191
=== modified file 'examples/html5-theme/widgets/Sliders.html'
--- examples/html5-theme/widgets/Sliders.html 2014-02-12 19:46:04 +0000
+++ examples/html5-theme/widgets/Sliders.html 2015-01-14 19:02:01 +0000
@@ -5,18 +5,18 @@
5 This file is part of ubuntu-html5-ui-toolkit.5 This file is part of ubuntu-html5-ui-toolkit.
66
7 This package is free software; you can redistribute it and/or modify7 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 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 9 published by the Free Software Foundation; either version 3 of the
10 License, or10 License, or
11 (at your option) any later version.11 (at your option) any later version.
12 12
13 This package is distributed in the hope that it will be useful,13 This package is distributed in the hope that it will be useful,
14 but WITHOUT ANY WARRANTY; without even the implied warranty of14 but WITHOUT ANY WARRANTY; without even the implied warranty of
15 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the15 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
16 GNU General Public License for more details.16 GNU General Public License for more details.
17 17
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
19 License along with this program. If not, see 19 License along with this program. If not, see
20 <http://www.gnu.org/licenses/>.20 <http://www.gnu.org/licenses/>.
21-->21-->
2222
@@ -36,14 +36,14 @@
36 <div data-role="content">36 <div data-role="content">
3737
38 <div class="inset">38 <div class="inset">
39 <form onsubmit="return false" oninput="ojim.value = jim.valueAsNumber">39 <form onsubmit="return false" oninput="ojim.value = jim.valueAsNumber;">
40 <input name="jim" id="jim" type="range" min="0" max="100" value="0">40 <input name="jim" id="jim" type="range" min="0" max="100" value="0">
41 <output for="jim" name="ojim">0</output>41 <output for="jim" name="ojim">0</output>
42 </form>42 </form>
43 </div>43 </div>
4444
45 <div class="inset">45 <div class="inset">
46 <form onsubmit="return false" oninput="obob.value = bob.valueAsNumber">46 <form onsubmit="return false" oninput="obob.value = bob.valueAsNumber;">
47 <input id="bob" name="bob" type="range" min="23" max="109" value="0">47 <input id="bob" name="bob" type="range" min="23" max="109" value="0">
48 <output for="bob" name="obob">23</output>48 <output for="bob" name="obob">23</output>
49 </form>49 </form>
5050
=== modified file 'examples/html5-theme/widgets/UbuntuShape.html'
--- examples/html5-theme/widgets/UbuntuShape.html 2014-02-13 19:54:08 +0000
+++ examples/html5-theme/widgets/UbuntuShape.html 2015-01-14 19:02:01 +0000
@@ -33,48 +33,46 @@
33<body>33<body>
34 <div data-role="mainview">34 <div data-role="mainview">
3535
36 <div class="large-font" style="padding-bottom: 40px">36 <div class="large-font" style="padding-bottom: 40px">Ubuntu Shape</div>
37 Ubuntu Shape37
38 </div>38 <div class="medium-font">
3939 <span>Color</span>
40 <div class="medium-font">40 <div data-role="content" style="display: inline">
41 <span>Color</span>41 <div data-role="shape">
42 <div data-role="content" style="display: inline">42 <div style="background-color: #dd4814"/>
43 <div data-role="shape">43 </div>
44 <div style="background-color: #dd4814"/>44 </div>
45 </div>45 <div data-role="content" style="display: inline">
46 </div>46 <div data-role="shape">
47 <div data-role="content" style="display: inline">47 <div style="background-color: violet"/>
48 <div data-role="shape">48 </div>
49 <div style="background-color: violet"/>49 </div>
50 </div>50 <div data-role="content" style="display: inline">
51 </div>51 <div data-role="shape">
52 <div data-role="content" style="display: inline">52 <div style="background-color: gray"/>
53 <div data-role="shape">53 </div>
54 <div style="background-color: gray"/>54 </div>
55 </div>55 </div>
56 </div>56
57 </div>57 <div class="medium-font">
5858 <span>Image</span>
59 <div class="medium-font">59 <div data-role="content" style="display: inline">
60 <span>Image</span>60 <div data-role="shape">
61 <div data-role="content" style="display: inline">61 <img src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/img/map_icon.png"></div>
62 <div data-role="shape">62 </div>
63 <img src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/img/map_icon.png">63 </div>
64 </div>64
65 </div>65 <div class="medium-font">
66 </div>66 <span>Radius</span>
6767 <div data-role="content" style="display: inline">
6868 <div data-role="shape">
69 <div class="medium-font">69 <div style="display: table;">
70 <span>Radius</span>70 <span style="display: table-cell; vertical-align: middle; text-align: center" class="small-font">small</span>
71 <div data-role="content" style="display: inline">71 </div>
72 <div data-role="shape">72 </div>
73 <div style="display: table;"> <span style="display: table-cell; vertical-align: middle; text-align: center" class="small-font">small</span></div>73 </div>
74 </div>74 </div>
75 </div>
76 </div>
7775
78 </div>76 </div>
79</body>77</body>
80</html>78</html>
81\ No newline at end of file79\ No newline at end of file

Subscribers

People subscribed via source and target branches