Merge lp:~abreu-alexandre/ubuntu-html5-theme/bug-fix-meta-package into lp:ubuntu-html5-theme
- bug-fix-meta-package
- Merge into trunk
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 |
Related bugs: |
Reviewer | Review Type | Date Requested | Status |
---|---|---|---|
Ubuntu HTML5 Theme Developers | Pending | ||
Review via email: mp+246483@code.launchpad.net |
Commit message
Meta branch that contains those bug fixes (easier to land):
lp:~daker/ubuntu-html5-theme/fix.1243396
lp:~daker/ubuntu-html5-theme/fix.1294779
lp:~daker/ubuntu-html5-theme/fix.1294993
lp:~daker/ubuntu-html5-theme/fix.1294986
lp:~daker/ubuntu-html5-theme/fix.1216874
lp:~daker/ubuntu-html5-theme/fix.slider
Description of the change
Meta branch that contains those bug fixes (easier to land):
lp:~daker/ubuntu-html5-theme/fix.1243396
lp:~daker/ubuntu-html5-theme/fix.1294779
lp:~daker/ubuntu-html5-theme/fix.1294993
lp:~daker/ubuntu-html5-theme/fix.1294986
lp:~daker/ubuntu-html5-theme/fix.1216874
lp:~daker/ubuntu-html5-theme/fix.slider
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
1 | === modified file '0.1/ambiance/css/appTemplate.css' | |||
2 | --- 0.1/ambiance/css/appTemplate.css 2014-05-25 18:51:21 +0000 | |||
3 | +++ 0.1/ambiance/css/appTemplate.css 2015-01-14 19:02:01 +0000 | |||
4 | @@ -48,6 +48,9 @@ | |||
5 | 48 | * Font family | 48 | * Font family |
6 | 49 | */ | 49 | */ |
7 | 50 | /* | 50 | /* |
8 | 51 | * Slider | ||
9 | 52 | */ | ||
10 | 53 | /* | ||
11 | 51 | * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com> | 54 | * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com> |
12 | 52 | * License granted by Canonical Limited | 55 | * License granted by Canonical Limited |
13 | 53 | * | 56 | * |
14 | @@ -221,7 +224,7 @@ | |||
15 | 221 | display: block; | 224 | display: block; |
16 | 222 | } | 225 | } |
17 | 223 | [data-role="header"] .active { | 226 | [data-role="header"] .active { |
19 | 224 | color: #484647; | 227 | color: #888888; |
20 | 225 | padding-left: 15px; | 228 | padding-left: 15px; |
21 | 226 | -webkit-opacity: 1; | 229 | -webkit-opacity: 1; |
22 | 227 | opacity: 1; | 230 | opacity: 1; |
23 | @@ -245,8 +248,8 @@ | |||
24 | 245 | 248 | ||
25 | 246 | [data-role="tabitem"] { | 249 | [data-role="tabitem"] { |
26 | 247 | display: inline-block; | 250 | display: inline-block; |
29 | 248 | font: 35px "Ubuntu"; | 251 | font: 33px "Ubuntu"; |
30 | 249 | letter-spacing: -1px; | 252 | font-weight: 100; |
31 | 250 | line-height: 60px; | 253 | line-height: 60px; |
32 | 251 | padding-right: 35px; | 254 | padding-right: 35px; |
33 | 252 | text-decoration: none; | 255 | text-decoration: none; |
34 | @@ -442,7 +445,7 @@ | |||
35 | 442 | } | 445 | } |
36 | 443 | 446 | ||
37 | 444 | .textfield.clear:focus { | 447 | .textfield.clear:focus { |
39 | 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; |
40 | 446 | background-size: 12%; | 449 | background-size: 12%; |
41 | 447 | } | 450 | } |
42 | 448 | 451 | ||
43 | @@ -555,7 +558,6 @@ | |||
44 | 555 | from { | 558 | from { |
45 | 556 | -webkit-transform: rotate(1deg); | 559 | -webkit-transform: rotate(1deg); |
46 | 557 | } | 560 | } |
47 | 558 | |||
48 | 559 | to { | 561 | to { |
49 | 560 | -webkit-transform: rotate(360deg); | 562 | -webkit-transform: rotate(360deg); |
50 | 561 | } | 563 | } |
51 | @@ -564,11 +566,9 @@ | |||
52 | 564 | 0% { | 566 | 0% { |
53 | 565 | opacity: 0; | 567 | opacity: 0; |
54 | 566 | } | 568 | } |
55 | 567 | |||
56 | 568 | 50% { | 569 | 50% { |
57 | 569 | opacity: 1; | 570 | opacity: 1; |
58 | 570 | } | 571 | } |
59 | 571 | |||
60 | 572 | 100% { | 572 | 100% { |
61 | 573 | opacity: 0; | 573 | opacity: 0; |
62 | 574 | } | 574 | } |
63 | @@ -698,43 +698,33 @@ | |||
64 | 698 | 0% { | 698 | 0% { |
65 | 699 | -webkit-transform: translate3d(0, 0, 0); | 699 | -webkit-transform: translate3d(0, 0, 0); |
66 | 700 | } | 700 | } |
67 | 701 | |||
68 | 702 | 10% { | 701 | 10% { |
69 | 703 | -webkit-transform: translate3d(-20px, 0, 0); | 702 | -webkit-transform: translate3d(-20px, 0, 0); |
70 | 704 | } | 703 | } |
71 | 705 | |||
72 | 706 | 20% { | 704 | 20% { |
73 | 707 | -webkit-transform: translate3d(20px, 0, 0); | 705 | -webkit-transform: translate3d(20px, 0, 0); |
74 | 708 | } | 706 | } |
75 | 709 | |||
76 | 710 | 30% { | 707 | 30% { |
77 | 711 | -webkit-transform: translate3d(-20px, 0, 0); | 708 | -webkit-transform: translate3d(-20px, 0, 0); |
78 | 712 | } | 709 | } |
79 | 713 | |||
80 | 714 | 40% { | 710 | 40% { |
81 | 715 | -webkit-transform: translate3d(20px, 0, 0); | 711 | -webkit-transform: translate3d(20px, 0, 0); |
82 | 716 | } | 712 | } |
83 | 717 | |||
84 | 718 | 50% { | 713 | 50% { |
85 | 719 | -webkit-transform: translate3d(-20px, 0, 0); | 714 | -webkit-transform: translate3d(-20px, 0, 0); |
86 | 720 | } | 715 | } |
87 | 721 | |||
88 | 722 | 60% { | 716 | 60% { |
89 | 723 | -webkit-transform: translate3d(20px, 0, 0); | 717 | -webkit-transform: translate3d(20px, 0, 0); |
90 | 724 | } | 718 | } |
91 | 725 | |||
92 | 726 | 70% { | 719 | 70% { |
93 | 727 | -webkit-transform: translate3d(-20px, 0, 0); | 720 | -webkit-transform: translate3d(-20px, 0, 0); |
94 | 728 | } | 721 | } |
95 | 729 | |||
96 | 730 | 80% { | 722 | 80% { |
97 | 731 | -webkit-transform: translate3d(20px, 0, 0); | 723 | -webkit-transform: translate3d(20px, 0, 0); |
98 | 732 | } | 724 | } |
99 | 733 | |||
100 | 734 | 90% { | 725 | 90% { |
101 | 735 | -webkit-transform: translate3d(-20px, 0, 0); | 726 | -webkit-transform: translate3d(-20px, 0, 0); |
102 | 736 | } | 727 | } |
103 | 737 | |||
104 | 738 | 100% { | 728 | 100% { |
105 | 739 | -webkit-transform: translate3d(0, 0, 0); | 729 | -webkit-transform: translate3d(0, 0, 0); |
106 | 740 | } | 730 | } |
107 | @@ -743,43 +733,33 @@ | |||
108 | 743 | 0% { | 733 | 0% { |
109 | 744 | -webkit-transform: translate3d(0, 0, 0); | 734 | -webkit-transform: translate3d(0, 0, 0); |
110 | 745 | } | 735 | } |
111 | 746 | |||
112 | 747 | 10% { | 736 | 10% { |
113 | 748 | -webkit-transform: translate3d(-20px, 0, 0); | 737 | -webkit-transform: translate3d(-20px, 0, 0); |
114 | 749 | } | 738 | } |
115 | 750 | |||
116 | 751 | 20% { | 739 | 20% { |
117 | 752 | -webkit-transform: translate3d(20px, 0, 0); | 740 | -webkit-transform: translate3d(20px, 0, 0); |
118 | 753 | } | 741 | } |
119 | 754 | |||
120 | 755 | 30% { | 742 | 30% { |
121 | 756 | -webkit-transform: translate3d(-20px, 0, 0); | 743 | -webkit-transform: translate3d(-20px, 0, 0); |
122 | 757 | } | 744 | } |
123 | 758 | |||
124 | 759 | 40% { | 745 | 40% { |
125 | 760 | -webkit-transform: translate3d(20px, 0, 0); | 746 | -webkit-transform: translate3d(20px, 0, 0); |
126 | 761 | } | 747 | } |
127 | 762 | |||
128 | 763 | 50% { | 748 | 50% { |
129 | 764 | -webkit-transform: translate3d(-20px, 0, 0); | 749 | -webkit-transform: translate3d(-20px, 0, 0); |
130 | 765 | } | 750 | } |
131 | 766 | |||
132 | 767 | 60% { | 751 | 60% { |
133 | 768 | -webkit-transform: translate3d(20px, 0, 0); | 752 | -webkit-transform: translate3d(20px, 0, 0); |
134 | 769 | } | 753 | } |
135 | 770 | |||
136 | 771 | 70% { | 754 | 70% { |
137 | 772 | -webkit-transform: translate3d(-20px, 0, 0); | 755 | -webkit-transform: translate3d(-20px, 0, 0); |
138 | 773 | } | 756 | } |
139 | 774 | |||
140 | 775 | 80% { | 757 | 80% { |
141 | 776 | -webkit-transform: translate3d(20px, 0, 0); | 758 | -webkit-transform: translate3d(20px, 0, 0); |
142 | 777 | } | 759 | } |
143 | 778 | |||
144 | 779 | 90% { | 760 | 90% { |
145 | 780 | -webkit-transform: translate3d(-20px, 0, 0); | 761 | -webkit-transform: translate3d(-20px, 0, 0); |
146 | 781 | } | 762 | } |
147 | 782 | |||
148 | 783 | 100% { | 763 | 100% { |
149 | 784 | -webkit-transform: translate3d(0, 0, 0); | 764 | -webkit-transform: translate3d(0, 0, 0); |
150 | 785 | } | 765 | } |
151 | @@ -826,7 +806,7 @@ | |||
152 | 826 | background: #dd4814; | 806 | background: #dd4814; |
153 | 827 | border: 2px solid #dd4814; | 807 | border: 2px solid #dd4814; |
154 | 828 | border-radius: 6px; | 808 | border-radius: 6px; |
156 | 829 | color: white; | 809 | color: #ffffff; |
157 | 830 | font-family: "Ubuntu"; | 810 | font-family: "Ubuntu"; |
158 | 831 | font-size: 1rem; | 811 | font-size: 1rem; |
159 | 832 | padding: 9px 25px; | 812 | padding: 9px 25px; |
160 | @@ -836,21 +816,21 @@ | |||
161 | 836 | } | 816 | } |
162 | 837 | [data-role="button"].positive { | 817 | [data-role="button"].positive { |
163 | 838 | background: #38b44a; | 818 | background: #38b44a; |
165 | 839 | color: white; | 819 | color: #ffffff; |
166 | 840 | border-color: #38b44a; | 820 | border-color: #38b44a; |
167 | 841 | } | 821 | } |
168 | 842 | [data-role="button"].information { | 822 | [data-role="button"].information { |
169 | 843 | background: #2ab7ec; | 823 | background: #2ab7ec; |
171 | 844 | color: white; | 824 | color: #ffffff; |
172 | 845 | border-color: #2ab7ec; | 825 | border-color: #2ab7ec; |
173 | 846 | } | 826 | } |
174 | 847 | [data-role="button"].secondary { | 827 | [data-role="button"].secondary { |
176 | 848 | background: white; | 828 | background: #ffffff; |
177 | 849 | color: #888888; | 829 | color: #888888; |
178 | 850 | } | 830 | } |
179 | 851 | [data-role="button"].negative { | 831 | [data-role="button"].negative { |
180 | 852 | background: #b2b2b2; | 832 | background: #b2b2b2; |
182 | 853 | color: white; | 833 | color: #ffffff; |
183 | 854 | border-color: #b2b2b2; | 834 | border-color: #b2b2b2; |
184 | 855 | } | 835 | } |
185 | 856 | 836 | ||
186 | @@ -878,31 +858,81 @@ | |||
187 | 878 | /* ---------------------------------- | 858 | /* ---------------------------------- |
188 | 879 | * Sliders | 859 | * Sliders |
189 | 880 | * ---------------------------------- */ | 860 | * ---------------------------------- */ |
190 | 881 | /** | ||
191 | 882 | TODO: remove absolte values for w/h | ||
192 | 883 | */ | ||
193 | 884 | input[type=range] { | 861 | input[type=range] { |
194 | 885 | -webkit-box-sizing: border-box; | 862 | -webkit-box-sizing: border-box; |
195 | 886 | box-sizing: border-box; | 863 | box-sizing: border-box; |
204 | 887 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); | 864 | -webkit-appearance: none; |
205 | 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%); |
206 | 889 | -webkit-appearance: none; | 866 | background-position: center; |
207 | 890 | background-color: rgba(192, 192, 192, 0.1); | 867 | background-size: 99% 4px; |
208 | 891 | width: 200px; | 868 | background-repeat: no-repeat; |
209 | 892 | height: 35px; | 869 | -webkit-appearance: none; |
210 | 893 | border-radius: 6px; | 870 | width: auto; |
211 | 894 | padding: 5px 0; | 871 | height: 36px; |
212 | 872 | border-radius: 1px; | ||
213 | 873 | overflow: hidden; | ||
214 | 874 | margin-top: 5px; | ||
215 | 875 | margin-bottom: 5px; | ||
216 | 876 | /*&::-moz-range-thumb:before { | ||
217 | 877 | position: absolute; | ||
218 | 878 | top: ($range-slider-height / 2) - ($range-track-height / 2); | ||
219 | 879 | left: -2000px; | ||
220 | 880 | width: 2000px; | ||
221 | 881 | height: $range-track-height; | ||
222 | 882 | background: $ubuntu_orange; | ||
223 | 883 | content: ' '; | ||
224 | 884 | }*/ | ||
225 | 895 | } | 885 | } |
226 | 896 | input[type=range]::-webkit-slider-thumb { | 886 | input[type=range]::-webkit-slider-thumb { |
229 | 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); |
230 | 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); |
231 | 899 | -webkit-box-sizing: border-box; | 889 | -webkit-box-sizing: border-box; |
232 | 900 | box-sizing: border-box; | 890 | box-sizing: border-box; |
233 | 901 | -webkit-appearance: none; | 891 | -webkit-appearance: none; |
238 | 902 | background-color: #dd4814; | 892 | background-color: #fff; |
239 | 903 | border-radius: 6px; | 893 | pointer-events: none; |
240 | 904 | width: 30px; | 894 | border-radius: 3px; |
241 | 905 | height: 27px; | 895 | width: 16px; |
242 | 896 | height: 16px; | ||
243 | 897 | position: relative; | ||
244 | 898 | } | ||
245 | 899 | input[type=range]::-webkit-slider-thumb:before { | ||
246 | 900 | /* what creates the colorful line on the left side of the slider */ | ||
247 | 901 | position: absolute; | ||
248 | 902 | top: 6px; | ||
249 | 903 | left: -2000px; | ||
250 | 904 | width: 2000px; | ||
251 | 905 | height: 4px; | ||
252 | 906 | background: #dd4814; | ||
253 | 907 | content: ' '; | ||
254 | 908 | } | ||
255 | 909 | input[type=range]::-moz-range-track { | ||
256 | 910 | -webkit-box-sizing: border-box; | ||
257 | 911 | box-sizing: border-box; | ||
258 | 912 | background: -moz-linear-gradient(to right, rgba(175, 175, 175, 0.3) 0%, rgba(175, 175, 175, 0.3) 100%); | ||
259 | 913 | background-position: center; | ||
260 | 914 | background-size: 99% 4px; | ||
261 | 915 | background-repeat: no-repeat; | ||
262 | 916 | width: auto; | ||
263 | 917 | height: 36px; | ||
264 | 918 | border: 0; | ||
265 | 919 | border-radius: 1px; | ||
266 | 920 | overflow: hidden; | ||
267 | 921 | margin-top: 5px; | ||
268 | 922 | margin-bottom: 5px; | ||
269 | 923 | } | ||
270 | 924 | input[type=range]::-moz-range-thumb { | ||
271 | 925 | -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2); | ||
272 | 926 | box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2); | ||
273 | 927 | -webkit-box-sizing: border-box; | ||
274 | 928 | box-sizing: border-box; | ||
275 | 929 | background: #fff; | ||
276 | 930 | pointer-events: none; | ||
277 | 931 | border: 0; | ||
278 | 932 | border-radius: 3px; | ||
279 | 933 | width: 16px; | ||
280 | 934 | height: 16px; | ||
281 | 935 | position: relative; | ||
282 | 906 | } | 936 | } |
283 | 907 | 937 | ||
284 | 908 | /* | 938 | /* |
285 | @@ -1199,7 +1229,7 @@ | |||
286 | 1199 | -webkit-box-sizing: border-box; | 1229 | -webkit-box-sizing: border-box; |
287 | 1200 | box-sizing: border-box; | 1230 | box-sizing: border-box; |
288 | 1201 | width: 100%; | 1231 | width: 100%; |
290 | 1202 | height: 3.5rem; | 1232 | height: 3.1rem; |
291 | 1203 | border-bottom: solid 0.1rem #c7c7c7; | 1233 | border-bottom: solid 0.1rem #c7c7c7; |
292 | 1204 | color: #787878; | 1234 | color: #787878; |
293 | 1205 | position: relative; | 1235 | position: relative; |
294 | @@ -1208,10 +1238,10 @@ | |||
295 | 1208 | text-decoration: none; | 1238 | text-decoration: none; |
296 | 1209 | color: #787878; | 1239 | color: #787878; |
297 | 1210 | display: block; | 1240 | display: block; |
299 | 1211 | height: 3.4rem; | 1241 | height: 3rem; |
300 | 1212 | position: relative; | 1242 | position: relative; |
301 | 1213 | border: none; | 1243 | border: none; |
303 | 1214 | line-height: 3.4rem; | 1244 | line-height: 3rem; |
304 | 1215 | padding-left: 1rem; | 1245 | padding-left: 1rem; |
305 | 1216 | padding-right: 1.5rem; | 1246 | padding-right: 1.5rem; |
306 | 1217 | border-top: 1px solid #ebebeb; | 1247 | border-top: 1px solid #ebebeb; |
307 | @@ -1229,7 +1259,7 @@ | |||
308 | 1229 | height: 2rem; | 1259 | height: 2rem; |
309 | 1230 | top: 50%; | 1260 | top: 50%; |
310 | 1231 | right: 0; | 1261 | right: 0; |
312 | 1232 | margin-top: -1rem; | 1262 | margin-top: -1.2rem; |
313 | 1233 | z-index: 0; | 1263 | z-index: 0; |
314 | 1234 | } | 1264 | } |
315 | 1235 | [data-role="list"] ul li > a:active { | 1265 | [data-role="list"] ul li > a:active { |
316 | @@ -1249,7 +1279,12 @@ | |||
317 | 1249 | line-height: 1rem; | 1279 | line-height: 1rem; |
318 | 1250 | } | 1280 | } |
319 | 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 { |
321 | 1252 | line-height: 2.5rem; | 1282 | line-height: 2.1rem; |
322 | 1283 | } | ||
323 | 1284 | [data-role="list"] ul li p + p { | ||
324 | 1285 | color: rgba(136, 136, 136, 0.8); | ||
325 | 1286 | padding-top: 0.1rem; | ||
326 | 1287 | font-size: 0.8rem; | ||
327 | 1253 | } | 1288 | } |
328 | 1254 | [data-role="list"] ul li > label { | 1289 | [data-role="list"] ul li > label { |
329 | 1255 | z-index: 100; | 1290 | z-index: 100; |
330 | @@ -1336,6 +1371,7 @@ | |||
331 | 1336 | } | 1371 | } |
332 | 1337 | [data-role="footer"] nav ul { | 1372 | [data-role="footer"] nav ul { |
333 | 1338 | list-style: none; | 1373 | list-style: none; |
334 | 1374 | text-align: right; | ||
335 | 1339 | } | 1375 | } |
336 | 1340 | [data-role="footer"] nav ul li, | 1376 | [data-role="footer"] nav ul li, |
337 | 1341 | [data-role="footer"] nav ul li a { | 1377 | [data-role="footer"] nav ul li a { |
338 | @@ -1343,7 +1379,7 @@ | |||
339 | 1343 | font-size: 0.6rem; | 1379 | font-size: 0.6rem; |
340 | 1344 | text-align: center; | 1380 | text-align: center; |
341 | 1345 | width: 60px; | 1381 | width: 60px; |
343 | 1346 | float: right; | 1382 | display: inline-block; |
344 | 1347 | text-decoration: none; | 1383 | text-decoration: none; |
345 | 1348 | } | 1384 | } |
346 | 1349 | [data-role="footer"] nav ul li { | 1385 | [data-role="footer"] nav ul li { |
347 | @@ -1394,7 +1430,7 @@ | |||
348 | 1394 | z-index: 100; | 1430 | z-index: 100; |
349 | 1395 | } | 1431 | } |
350 | 1396 | [data-role="shape"]:after { | 1432 | [data-role="shape"]:after { |
352 | 1397 | background: url(../img/ubuntushape_medium_radius_idle@18.png) no-repeat; | 1433 | background: url(../img/ubuntushape.png) no-repeat; |
353 | 1398 | background-size: 100% 100%; | 1434 | background-size: 100% 100%; |
354 | 1399 | content: ' '; | 1435 | content: ' '; |
355 | 1400 | width: 100%; | 1436 | width: 100%; |
356 | @@ -1406,14 +1442,14 @@ | |||
357 | 1406 | [data-role="shape"] img { | 1442 | [data-role="shape"] img { |
358 | 1407 | height: 100%; | 1443 | height: 100%; |
359 | 1408 | width: 100%; | 1444 | width: 100%; |
361 | 1409 | border-radius: 1.5rem; | 1445 | max-width: 100% !important; |
362 | 1410 | margin-bottom: 0; | 1446 | margin-bottom: 0; |
363 | 1411 | display: inline-block; | 1447 | display: inline-block; |
364 | 1412 | } | 1448 | } |
365 | 1413 | [data-role="shape"] div { | 1449 | [data-role="shape"] div { |
366 | 1414 | height: 100%; | 1450 | height: 100%; |
367 | 1415 | width: 100%; | 1451 | width: 100%; |
369 | 1416 | border-radius: 1.5rem; | 1452 | border-radius: 1rem; |
370 | 1417 | margin-bottom: 0; | 1453 | margin-bottom: 0; |
371 | 1418 | display: inline-block; | 1454 | display: inline-block; |
372 | 1419 | } | 1455 | } |
373 | @@ -1496,8 +1532,8 @@ | |||
374 | 1496 | * <http://www.gnu.org/licenses/>. | 1532 | * <http://www.gnu.org/licenses/>. |
375 | 1497 | */ | 1533 | */ |
376 | 1498 | [data-role="option-selector"] { | 1534 | [data-role="option-selector"] { |
379 | 1499 | -webkit-box-shadow: inset 0 2px 2px 0 #d5d5d5; | 1535 | -webkit-box-shadow: inset 0 2px 2px 0 #D5D5D5; |
380 | 1500 | box-shadow: inset 0 2px 2px 0 #d5d5d5; | 1536 | box-shadow: inset 0 2px 2px 0 #D5D5D5; |
381 | 1501 | width: 100%; | 1537 | width: 100%; |
382 | 1502 | height: auto; | 1538 | height: auto; |
383 | 1503 | margin: 0 auto; | 1539 | margin: 0 auto; |
384 | @@ -1689,3 +1725,5 @@ | |||
385 | 1689 | font-size: 8px; | 1725 | font-size: 8px; |
386 | 1690 | line-height: 1.3; | 1726 | line-height: 1.3; |
387 | 1691 | } | 1727 | } |
388 | 1728 | |||
389 | 1729 | /*# sourceMappingURL=appTemplate.css.map */ | ||
390 | 1692 | 1730 | ||
391 | === modified file '0.1/ambiance/css/sass/constants.scss' | |||
392 | --- 0.1/ambiance/css/sass/constants.scss 2014-02-24 22:24:41 +0000 | |||
393 | +++ 0.1/ambiance/css/sass/constants.scss 2015-01-14 19:02:01 +0000 | |||
394 | @@ -20,9 +20,9 @@ | |||
395 | 20 | * <http://www.gnu.org/licenses/> | 20 | * <http://www.gnu.org/licenses/> |
396 | 21 | */ | 21 | */ |
397 | 22 | 22 | ||
401 | 23 | /* | 23 | /* |
402 | 24 | * Colours | 24 | * Colours |
403 | 25 | */ | 25 | */ |
404 | 26 | $ubuntu_orange: #dd4814; | 26 | $ubuntu_orange: #dd4814; |
405 | 27 | $text_color: #787878; | 27 | $text_color: #787878; |
406 | 28 | $cream: #f3f3e7; | 28 | $cream: #f3f3e7; |
407 | @@ -36,4 +36,13 @@ | |||
408 | 36 | * Font family | 36 | * Font family |
409 | 37 | */ | 37 | */ |
410 | 38 | 38 | ||
411 | 39 | $font_family: "Ubuntu"; | ||
412 | 40 | \ No newline at end of file | 39 | \ No newline at end of file |
413 | 40 | $font_family: "Ubuntu"; | ||
414 | 41 | |||
415 | 42 | /* | ||
416 | 43 | * Slider | ||
417 | 44 | */ | ||
418 | 45 | |||
419 | 46 | $range-track-height: 4px !default; | ||
420 | 47 | $range-slider-width: 16px !default; | ||
421 | 48 | $range-slider-height: 16px !default; | ||
422 | 49 | $range-slider-border-radius: 1px !default; | ||
423 | 41 | 50 | ||
424 | === modified file '0.1/ambiance/css/sass/listitems.scss' | |||
425 | --- 0.1/ambiance/css/sass/listitems.scss 2014-02-24 17:08:30 +0000 | |||
426 | +++ 0.1/ambiance/css/sass/listitems.scss 2015-01-14 19:02:01 +0000 | |||
427 | @@ -42,7 +42,7 @@ | |||
428 | 42 | li { | 42 | li { |
429 | 43 | @include box_sizing (border-box); | 43 | @include box_sizing (border-box); |
430 | 44 | width: 100%; | 44 | width: 100%; |
432 | 45 | height: 3.5rem; | 45 | height: 3.1rem; |
433 | 46 | border-bottom: solid 0.1rem #c7c7c7; | 46 | border-bottom: solid 0.1rem #c7c7c7; |
434 | 47 | color: $text_color; | 47 | color: $text_color; |
435 | 48 | position: relative; | 48 | position: relative; |
436 | @@ -51,10 +51,10 @@ | |||
437 | 51 | text-decoration: none; | 51 | text-decoration: none; |
438 | 52 | color: $text_color; | 52 | color: $text_color; |
439 | 53 | display: block; | 53 | display: block; |
441 | 54 | height: 3.4rem; | 54 | height: 3rem; |
442 | 55 | position: relative; | 55 | position: relative; |
443 | 56 | border: none; | 56 | border: none; |
445 | 57 | line-height: 3.4rem; | 57 | line-height: 3rem; |
446 | 58 | padding-left: 1rem; | 58 | padding-left: 1rem; |
447 | 59 | padding-right: 1.5rem; | 59 | padding-right: 1.5rem; |
448 | 60 | border-top: 1px solid #ebebeb; | 60 | border-top: 1px solid #ebebeb; |
449 | @@ -72,7 +72,7 @@ | |||
450 | 72 | height: 2rem; | 72 | height: 2rem; |
451 | 73 | top: 50%; | 73 | top: 50%; |
452 | 74 | right: 0; | 74 | right: 0; |
454 | 75 | margin-top: -1rem; | 75 | margin-top: -1.2rem; |
455 | 76 | z-index: 0; | 76 | z-index: 0; |
456 | 77 | } | 77 | } |
457 | 78 | 78 | ||
458 | @@ -96,7 +96,13 @@ | |||
459 | 96 | 96 | ||
460 | 97 | &:only-child, | 97 | &:only-child, |
461 | 98 | &:first-of-type:last-of-type { | 98 | &:first-of-type:last-of-type { |
463 | 99 | line-height: 2.5rem; | 99 | line-height: 2.1rem; |
464 | 100 | } | ||
465 | 101 | |||
466 | 102 | & + p { | ||
467 | 103 | color: rgba(136, 136, 136, 0.8); | ||
468 | 104 | padding-top: 0.1rem; | ||
469 | 105 | font-size: 0.8rem | ||
470 | 100 | } | 106 | } |
471 | 101 | } | 107 | } |
472 | 102 | 108 | ||
473 | 103 | 109 | ||
474 | === modified file '0.1/ambiance/css/sass/shapes.scss' | |||
475 | --- 0.1/ambiance/css/sass/shapes.scss 2014-02-17 16:25:38 +0000 | |||
476 | +++ 0.1/ambiance/css/sass/shapes.scss 2015-01-14 19:02:01 +0000 | |||
477 | @@ -34,7 +34,7 @@ | |||
478 | 34 | z-index: 100; | 34 | z-index: 100; |
479 | 35 | 35 | ||
480 | 36 | &:after { | 36 | &:after { |
482 | 37 | background: url(../img/ubuntushape_medium_radius_idle@18.png) no-repeat; | 37 | background: url(../img/ubuntushape.png) no-repeat; |
483 | 38 | background-size: 100% 100%; | 38 | background-size: 100% 100%; |
484 | 39 | content: ' '; | 39 | content: ' '; |
485 | 40 | width: 100%; | 40 | width: 100%; |
486 | @@ -47,7 +47,7 @@ | |||
487 | 47 | img { | 47 | img { |
488 | 48 | height: 100%; | 48 | height: 100%; |
489 | 49 | width: 100%; | 49 | width: 100%; |
491 | 50 | border-radius: 1.5rem; | 50 | max-width: 100%!important; |
492 | 51 | margin-bottom: 0; | 51 | margin-bottom: 0; |
493 | 52 | display: inline-block; | 52 | display: inline-block; |
494 | 53 | } | 53 | } |
495 | @@ -55,7 +55,7 @@ | |||
496 | 55 | div { | 55 | div { |
497 | 56 | height: 100%; | 56 | height: 100%; |
498 | 57 | width: 100%; | 57 | width: 100%; |
500 | 58 | border-radius: 1.5rem; | 58 | border-radius: 1rem; |
501 | 59 | margin-bottom: 0; | 59 | margin-bottom: 0; |
502 | 60 | display: inline-block; | 60 | display: inline-block; |
503 | 61 | } | 61 | } |
504 | 62 | 62 | ||
505 | === modified file '0.1/ambiance/css/sass/sliders.scss' | |||
506 | --- 0.1/ambiance/css/sass/sliders.scss 2014-02-17 16:25:38 +0000 | |||
507 | +++ 0.1/ambiance/css/sass/sliders.scss 2015-01-14 19:02:01 +0000 | |||
508 | @@ -24,27 +24,78 @@ | |||
509 | 24 | * Sliders | 24 | * Sliders |
510 | 25 | * ---------------------------------- */ | 25 | * ---------------------------------- */ |
511 | 26 | 26 | ||
512 | 27 | /** | ||
513 | 28 | TODO: remove absolte values for w/h | ||
514 | 29 | */ | ||
515 | 30 | |||
516 | 31 | input[type=range] { | 27 | input[type=range] { |
517 | 32 | @include box_sizing (border-box); | 28 | @include box_sizing (border-box); |
525 | 33 | @include box_shadow (inset 0 1px 1px rgba(0, 0, 0, 0.1)); | 29 | -webkit-appearance: none; |
526 | 34 | -webkit-appearance: none; | 30 | background: linear-gradient(to right, rgba(175, 175, 175, 0.30) 0%, rgba(175, 175, 175, 0.30) 100%); |
527 | 35 | background-color: rgba(192, 192, 192, 0.1); | 31 | background-position: center; |
528 | 36 | width: 200px; | 32 | background-size: 99% 4px; |
529 | 37 | height: 35px; | 33 | background-repeat: no-repeat; |
530 | 38 | border-radius: 6px; | 34 | -webkit-appearance: none; |
531 | 39 | padding: 5px 0; | 35 | width: auto; |
532 | 36 | height: $range-slider-height + 20; | ||
533 | 37 | border-radius: $range-slider-border-radius; | ||
534 | 38 | overflow: hidden; | ||
535 | 39 | margin-top: 5px; | ||
536 | 40 | margin-bottom: 5px; | ||
537 | 40 | 41 | ||
538 | 41 | &::-webkit-slider-thumb { | 42 | &::-webkit-slider-thumb { |
540 | 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)); |
541 | 43 | @include box_sizing (border-box); | 44 | @include box_sizing (border-box); |
542 | 44 | -webkit-appearance: none; | 45 | -webkit-appearance: none; |
548 | 45 | background-color: $ubuntu_orange; | 46 | background-color: #fff; |
549 | 46 | border-radius: 6px; | 47 | pointer-events: none; |
550 | 47 | width: 30px; | 48 | border-radius: 3px; |
551 | 48 | height: 27px; | 49 | width: $range-slider-width; |
552 | 49 | } | 50 | height: $range-slider-height; |
553 | 51 | position: relative; | ||
554 | 52 | } | ||
555 | 53 | |||
556 | 54 | &::-webkit-slider-thumb:before { | ||
557 | 55 | /* what creates the colorful line on the left side of the slider */ | ||
558 | 56 | position: absolute; | ||
559 | 57 | top: ($range-slider-height / 2) - ($range-track-height / 2); | ||
560 | 58 | left: -2000px; | ||
561 | 59 | width: 2000px; | ||
562 | 60 | height: $range-track-height; | ||
563 | 61 | background: $ubuntu_orange; | ||
564 | 62 | content: ' '; | ||
565 | 63 | } | ||
566 | 64 | |||
567 | 65 | &::-moz-range-track { | ||
568 | 66 | @include box_sizing (border-box); | ||
569 | 67 | background: -moz-linear-gradient(to right, rgba(175, 175, 175, 0.30) 0%, rgba(175, 175, 175, 0.30) 100%); | ||
570 | 68 | background-position: center; | ||
571 | 69 | background-size: 99% 4px; | ||
572 | 70 | background-repeat: no-repeat; | ||
573 | 71 | width: auto; | ||
574 | 72 | height: $range-slider-height + 20; | ||
575 | 73 | border: 0; | ||
576 | 74 | border-radius: $range-slider-border-radius; | ||
577 | 75 | overflow: hidden; | ||
578 | 76 | margin-top: 5px; | ||
579 | 77 | margin-bottom: 5px; | ||
580 | 78 | } | ||
581 | 79 | |||
582 | 80 | &::-moz-range-thumb { | ||
583 | 81 | @include box_shadow (inset 0 1px 0 rgba(0, 0, 0, 0.2)); | ||
584 | 82 | @include box_sizing (border-box); | ||
585 | 83 | background: #fff; | ||
586 | 84 | pointer-events: none; | ||
587 | 85 | border: 0; | ||
588 | 86 | border-radius: 3px; | ||
589 | 87 | width: $range-slider-width; | ||
590 | 88 | height: $range-slider-height; | ||
591 | 89 | position: relative; | ||
592 | 90 | } | ||
593 | 91 | |||
594 | 92 | /*&::-moz-range-thumb:before { | ||
595 | 93 | position: absolute; | ||
596 | 94 | top: ($range-slider-height / 2) - ($range-track-height / 2); | ||
597 | 95 | left: -2000px; | ||
598 | 96 | width: 2000px; | ||
599 | 97 | height: $range-track-height; | ||
600 | 98 | background: $ubuntu_orange; | ||
601 | 99 | content: ' '; | ||
602 | 100 | }*/ | ||
603 | 50 | } | 101 | } |
604 | 51 | 102 | ||
605 | === modified file '0.1/ambiance/css/sass/tabs.scss' | |||
606 | --- 0.1/ambiance/css/sass/tabs.scss 2014-02-28 22:05:37 +0000 | |||
607 | +++ 0.1/ambiance/css/sass/tabs.scss 2015-01-14 19:02:01 +0000 | |||
608 | @@ -41,7 +41,7 @@ | |||
609 | 41 | } | 41 | } |
610 | 42 | 42 | ||
611 | 43 | .active { | 43 | .active { |
613 | 44 | color: #484647; | 44 | color: #888888; |
614 | 45 | padding-left: 15px; | 45 | padding-left: 15px; |
615 | 46 | -webkit-opacity: 1; | 46 | -webkit-opacity: 1; |
616 | 47 | opacity: 1; | 47 | opacity: 1; |
617 | @@ -68,8 +68,8 @@ | |||
618 | 68 | 68 | ||
619 | 69 | [data-role="tabitem"] { | 69 | [data-role="tabitem"] { |
620 | 70 | display: inline-block; | 70 | display: inline-block; |
623 | 71 | font: 35px $font_family; | 71 | font: 33px $font_family; |
624 | 72 | letter-spacing: -1px; | 72 | font-weight: 100; |
625 | 73 | line-height: 60px; | 73 | line-height: 60px; |
626 | 74 | padding-right: 35px; | 74 | padding-right: 35px; |
627 | 75 | text-decoration: none; | 75 | text-decoration: none; |
628 | 76 | 76 | ||
629 | === modified file '0.1/ambiance/css/sass/toolbars.scss' | |||
630 | --- 0.1/ambiance/css/sass/toolbars.scss 2014-02-20 20:37:13 +0000 | |||
631 | +++ 0.1/ambiance/css/sass/toolbars.scss 2015-01-14 19:02:01 +0000 | |||
632 | @@ -49,6 +49,7 @@ | |||
633 | 49 | 49 | ||
634 | 50 | ul { | 50 | ul { |
635 | 51 | list-style: none; | 51 | list-style: none; |
636 | 52 | text-align: right; | ||
637 | 52 | 53 | ||
638 | 53 | li, | 54 | li, |
639 | 54 | li a { | 55 | li a { |
640 | @@ -56,7 +57,7 @@ | |||
641 | 56 | font-size: 0.6rem; | 57 | font-size: 0.6rem; |
642 | 57 | text-align: center; | 58 | text-align: center; |
643 | 58 | width: 60px; | 59 | width: 60px; |
645 | 59 | float: right; | 60 | display: inline-block; |
646 | 60 | text-decoration: none; | 61 | text-decoration: none; |
647 | 61 | } | 62 | } |
648 | 62 | li { | 63 | li { |
649 | 63 | 64 | ||
650 | === added file '0.1/ambiance/img/ubuntushape.png' | |||
651 | 64 | Binary 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 | 65 | Binary 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 |
652 | === modified file '0.1/ambiance/js/list.js' | |||
653 | --- 0.1/ambiance/js/list.js 2014-02-28 20:29:07 +0000 | |||
654 | +++ 0.1/ambiance/js/list.js 2015-01-14 19:02:01 +0000 | |||
655 | @@ -78,7 +78,7 @@ | |||
656 | 78 | * Add or Set the List Header | 78 | * Add or Set the List Header |
657 | 79 | * @method setHeader | 79 | * @method setHeader |
658 | 80 | * @param {String} text - The header text | 80 | * @param {String} text - The header text |
660 | 81 | */ | 81 | */ |
661 | 82 | setHeader: function (text) { | 82 | setHeader: function (text) { |
662 | 83 | if (typeof (text) == 'string') { | 83 | if (typeof (text) == 'string') { |
663 | 84 | var header = this._list.querySelectorAll('header'); | 84 | var header = this._list.querySelectorAll('header'); |
664 | @@ -96,7 +96,7 @@ | |||
665 | 96 | if (!header) | 96 | if (!header) |
666 | 97 | header = document.createElement('header'); | 97 | header = document.createElement('header'); |
667 | 98 | 98 | ||
669 | 99 | header.innerText = text; | 99 | header.textContent = text; |
670 | 100 | } | 100 | } |
671 | 101 | }, | 101 | }, |
672 | 102 | /** | 102 | /** |
673 | @@ -122,12 +122,12 @@ | |||
674 | 122 | }); | 122 | }); |
675 | 123 | } | 123 | } |
676 | 124 | //FIXME: no real checks on text content | 124 | //FIXME: no real checks on text content |
678 | 125 | a.innerText = text; | 125 | a.textContent = text; |
679 | 126 | li.appendChild(a); | 126 | li.appendChild(a); |
680 | 127 | 127 | ||
681 | 128 | if (label && typeof (label) == 'string') { | 128 | if (label && typeof (label) == 'string') { |
682 | 129 | var n = document.createElement('label'); | 129 | var n = document.createElement('label'); |
684 | 130 | n.innerText = label; | 130 | n.textContent = label; |
685 | 131 | li.appendChild(n); | 131 | li.appendChild(n); |
686 | 132 | } | 132 | } |
687 | 133 | 133 | ||
688 | @@ -143,7 +143,7 @@ | |||
689 | 143 | * Gets a list item <li> by its index, where index counting starts from 1 | 143 | * Gets a list item <li> by its index, where index counting starts from 1 |
690 | 144 | * @method at | 144 | * @method at |
691 | 145 | * @param {Number} index | 145 | * @param {Number} index |
693 | 146 | * @return The list item, or null on failure | 146 | * @return The list item, or null on failure |
694 | 147 | */ | 147 | */ |
695 | 148 | at: function (index) { | 148 | at: function (index) { |
696 | 149 | if (typeof (index) != 'number') | 149 | if (typeof (index) != 'number') |
697 | 150 | 150 | ||
698 | === modified file 'examples/html5-theme/widgets/ListItems.html' | |||
699 | --- examples/html5-theme/widgets/ListItems.html 2014-02-12 19:46:04 +0000 | |||
700 | +++ examples/html5-theme/widgets/ListItems.html 2015-01-14 19:02:01 +0000 | |||
701 | @@ -5,18 +5,18 @@ | |||
702 | 5 | This file is part of ubuntu-html5-ui-toolkit. | 5 | This file is part of ubuntu-html5-ui-toolkit. |
703 | 6 | 6 | ||
704 | 7 | This package is free software; you can redistribute it and/or modify | 7 | This package is free software; you can redistribute it and/or modify |
707 | 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 |
708 | 9 | published by the Free Software Foundation; either version 3 of the | 9 | published by the Free Software Foundation; either version 3 of the |
709 | 10 | License, or | 10 | License, or |
710 | 11 | (at your option) any later version. | 11 | (at your option) any later version. |
712 | 12 | 12 | ||
713 | 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, |
714 | 14 | but WITHOUT ANY WARRANTY; without even the implied warranty of | 14 | but WITHOUT ANY WARRANTY; without even the implied warranty of |
715 | 15 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | 15 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
716 | 16 | GNU General Public License for more details. | 16 | GNU General Public License for more details. |
720 | 17 | 17 | ||
721 | 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 |
722 | 19 | License along with this program. If not, see | 19 | License along with this program. If not, see |
723 | 20 | <http://www.gnu.org/licenses/>. | 20 | <http://www.gnu.org/licenses/>. |
724 | 21 | --> | 21 | --> |
725 | 22 | 22 | ||
726 | @@ -54,15 +54,15 @@ | |||
727 | 54 | <ul data-role="listview"> | 54 | <ul data-role="listview"> |
728 | 55 | <li> | 55 | <li> |
729 | 56 | <p>Label</p> | 56 | <p>Label</p> |
739 | 57 | <p class="small-font">Secondary Label</p> | 57 | <p>Secondary Label</p> |
740 | 58 | </li> | 58 | </li> |
741 | 59 | <li> | 59 | <li> |
742 | 60 | <p>Label</p> | 60 | <p>Label</p> |
743 | 61 | <p class="small-font">Secondary Label</p> | 61 | <p>Secondary Label</p> |
744 | 62 | </li> | 62 | </li> |
745 | 63 | <li> | 63 | <li> |
746 | 64 | <p>Label</p> | 64 | <p>Label</p> |
747 | 65 | <p class="small-font">Secondary Label</p> | 65 | <p>Secondary Label</p> |
748 | 66 | </li> | 66 | </li> |
749 | 67 | </ul> | 67 | </ul> |
750 | 68 | </section> | 68 | </section> |
751 | @@ -72,19 +72,19 @@ | |||
752 | 72 | <ul data-role="listview"> | 72 | <ul data-role="listview"> |
753 | 73 | <li> | 73 | <li> |
754 | 74 | <p>Label</p> | 74 | <p>Label</p> |
768 | 75 | <p class="small-font">Value 1, Value 2</p> | 75 | <p>Value 1, Value 2</p> |
769 | 76 | </li> | 76 | </li> |
770 | 77 | <li> | 77 | <li> |
771 | 78 | <p>Label</p> | 78 | <p>Label</p> |
772 | 79 | <p class="small-font">Value 1, Value 2</p> | 79 | <p>Value 1, Value 2</p> |
773 | 80 | </li> | 80 | </li> |
774 | 81 | <li> | 81 | <li> |
775 | 82 | <p>Label</p> | 82 | <p>Label</p> |
776 | 83 | <p class="small-font">Value 1, Value 2</p> | 83 | <p>Value 1, Value 2</p> |
777 | 84 | </li> | 84 | </li> |
778 | 85 | <li> | 85 | <li> |
779 | 86 | <p>Label</p> | 86 | <p>Label</p> |
780 | 87 | <p class="small-font">Value 1, Value 2</p> | 87 | <p>Value 1, Value 2</p> |
781 | 88 | </li> | 88 | </li> |
782 | 89 | </ul> | 89 | </ul> |
783 | 90 | </section> | 90 | </section> |
784 | 91 | 91 | ||
785 | === modified file 'examples/html5-theme/widgets/Sliders.html' | |||
786 | --- examples/html5-theme/widgets/Sliders.html 2014-02-12 19:46:04 +0000 | |||
787 | +++ examples/html5-theme/widgets/Sliders.html 2015-01-14 19:02:01 +0000 | |||
788 | @@ -5,18 +5,18 @@ | |||
789 | 5 | This file is part of ubuntu-html5-ui-toolkit. | 5 | This file is part of ubuntu-html5-ui-toolkit. |
790 | 6 | 6 | ||
791 | 7 | This package is free software; you can redistribute it and/or modify | 7 | This package is free software; you can redistribute it and/or modify |
794 | 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 |
795 | 9 | published by the Free Software Foundation; either version 3 of the | 9 | published by the Free Software Foundation; either version 3 of the |
796 | 10 | License, or | 10 | License, or |
797 | 11 | (at your option) any later version. | 11 | (at your option) any later version. |
799 | 12 | 12 | ||
800 | 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, |
801 | 14 | but WITHOUT ANY WARRANTY; without even the implied warranty of | 14 | but WITHOUT ANY WARRANTY; without even the implied warranty of |
802 | 15 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | 15 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
803 | 16 | GNU General Public License for more details. | 16 | GNU General Public License for more details. |
807 | 17 | 17 | ||
808 | 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 |
809 | 19 | License along with this program. If not, see | 19 | License along with this program. If not, see |
810 | 20 | <http://www.gnu.org/licenses/>. | 20 | <http://www.gnu.org/licenses/>. |
811 | 21 | --> | 21 | --> |
812 | 22 | 22 | ||
813 | @@ -36,14 +36,14 @@ | |||
814 | 36 | <div data-role="content"> | 36 | <div data-role="content"> |
815 | 37 | 37 | ||
816 | 38 | <div class="inset"> | 38 | <div class="inset"> |
818 | 39 | <form onsubmit="return false" oninput="ojim.value = jim.valueAsNumber"> | 39 | <form onsubmit="return false" oninput="ojim.value = jim.valueAsNumber;"> |
819 | 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"> |
820 | 41 | <output for="jim" name="ojim">0</output> | 41 | <output for="jim" name="ojim">0</output> |
821 | 42 | </form> | 42 | </form> |
822 | 43 | </div> | 43 | </div> |
823 | 44 | 44 | ||
824 | 45 | <div class="inset"> | 45 | <div class="inset"> |
826 | 46 | <form onsubmit="return false" oninput="obob.value = bob.valueAsNumber"> | 46 | <form onsubmit="return false" oninput="obob.value = bob.valueAsNumber;"> |
827 | 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"> |
828 | 48 | <output for="bob" name="obob">23</output> | 48 | <output for="bob" name="obob">23</output> |
829 | 49 | </form> | 49 | </form> |
830 | 50 | 50 | ||
831 | === modified file 'examples/html5-theme/widgets/UbuntuShape.html' | |||
832 | --- examples/html5-theme/widgets/UbuntuShape.html 2014-02-13 19:54:08 +0000 | |||
833 | +++ examples/html5-theme/widgets/UbuntuShape.html 2015-01-14 19:02:01 +0000 | |||
834 | @@ -33,48 +33,46 @@ | |||
835 | 33 | <body> | 33 | <body> |
836 | 34 | <div data-role="mainview"> | 34 | <div data-role="mainview"> |
837 | 35 | 35 | ||
879 | 36 | <div class="large-font" style="padding-bottom: 40px"> | 36 | <div class="large-font" style="padding-bottom: 40px">Ubuntu Shape</div> |
880 | 37 | Ubuntu Shape | 37 | |
881 | 38 | </div> | 38 | <div class="medium-font"> |
882 | 39 | 39 | <span>Color</span> | |
883 | 40 | <div class="medium-font"> | 40 | <div data-role="content" style="display: inline"> |
884 | 41 | <span>Color</span> | 41 | <div data-role="shape"> |
885 | 42 | <div data-role="content" style="display: inline"> | 42 | <div style="background-color: #dd4814"/> |
886 | 43 | <div data-role="shape"> | 43 | </div> |
887 | 44 | <div style="background-color: #dd4814"/> | 44 | </div> |
888 | 45 | </div> | 45 | <div data-role="content" style="display: inline"> |
889 | 46 | </div> | 46 | <div data-role="shape"> |
890 | 47 | <div data-role="content" style="display: inline"> | 47 | <div style="background-color: violet"/> |
891 | 48 | <div data-role="shape"> | 48 | </div> |
892 | 49 | <div style="background-color: violet"/> | 49 | </div> |
893 | 50 | </div> | 50 | <div data-role="content" style="display: inline"> |
894 | 51 | </div> | 51 | <div data-role="shape"> |
895 | 52 | <div data-role="content" style="display: inline"> | 52 | <div style="background-color: gray"/> |
896 | 53 | <div data-role="shape"> | 53 | </div> |
897 | 54 | <div style="background-color: gray"/> | 54 | </div> |
898 | 55 | </div> | 55 | </div> |
899 | 56 | </div> | 56 | |
900 | 57 | </div> | 57 | <div class="medium-font"> |
901 | 58 | 58 | <span>Image</span> | |
902 | 59 | <div class="medium-font"> | 59 | <div data-role="content" style="display: inline"> |
903 | 60 | <span>Image</span> | 60 | <div data-role="shape"> |
904 | 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> |
905 | 62 | <div data-role="shape"> | 62 | </div> |
906 | 63 | <img src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/img/map_icon.png"> | 63 | </div> |
907 | 64 | </div> | 64 | |
908 | 65 | </div> | 65 | <div class="medium-font"> |
909 | 66 | </div> | 66 | <span>Radius</span> |
910 | 67 | 67 | <div data-role="content" style="display: inline"> | |
911 | 68 | 68 | <div data-role="shape"> | |
912 | 69 | <div class="medium-font"> | 69 | <div style="display: table;"> |
913 | 70 | <span>Radius</span> | 70 | <span style="display: table-cell; vertical-align: middle; text-align: center" class="small-font">small</span> |
914 | 71 | <div data-role="content" style="display: inline"> | 71 | </div> |
915 | 72 | <div data-role="shape"> | 72 | </div> |
916 | 73 | <div style="display: table;"> <span style="display: table-cell; vertical-align: middle; text-align: center" class="small-font">small</span></div> | 73 | </div> |
917 | 74 | </div> | 74 | </div> |
877 | 75 | </div> | ||
878 | 76 | </div> | ||
918 | 77 | 75 | ||
919 | 78 | </div> | 76 | </div> |
920 | 79 | </body> | 77 | </body> |
922 | 80 | </html> | 78 | </html> |
923 | 81 | \ No newline at end of file | 79 | \ No newline at end of file |