Ubuntu HTML5 UI SDK

Merge lp:~darrylyeo/ubuntu-html5-theme/ubuntu-html5-theme into lp:ubuntu-html5-theme

  1. ubuntu-html5-theme
  2. Merge into trunk
Proposed by Darryl Yeo
Status: Merged
Merged at revision: 212
Proposed branch: lp:~darrylyeo/ubuntu-html5-theme/ubuntu-html5-theme
Merge into: lp:ubuntu-html5-theme
Diff against target: 2516 lines (+915/-1123)
6 files modified
0.1/ambiance/css/appTemplate.css (+825/-1036)
0.1/ambiance/css/sass/buttons.scss (+43/-10)
0.1/ambiance/css/sass/constants.scss (+1/-1)
0.1/ambiance/css/sass/icons.scss (+1/-1)
0.1/ambiance/css/sass/mixins.scss (+19/-7)
examples/html5-theme/widgets/Buttons.html (+26/-68)
To merge this branch: bzr merge lp:~darrylyeo/ubuntu-html5-theme/ubuntu-html5-theme
Reviewer Review Type Date Requested Status
Alexandre Abreu Needs Fixing
David Barth Pending
Review via email: mp+280807@code.launchpad.net

Description of the change

Fixed Bug #1522820: Modified CSS/HTML markup to make the buttons in the HTML5 widget gallery match its QML cousin more closely.

To post a comment you must log in.
Revision history for this message
Alexandre Abreu (abreu-alexandre) wrote :

A few comments:

- could you remove the <header> in buttons.html ?
- could you fix the color which shouldn't be orange?
- could you make the text for the Color example the same as the qml one?
- could you tweak the color for the "call" icon to match the qml one?

review: Needs Fixing
lp:~darrylyeo/ubuntu-html5-theme/ubuntu-html5-theme updated
213. By Darryl Yeo

Bug #1522820: Cleaned up HTML markup, made icons white using a CSS filter

Revision history for this message
Darryl Yeo (darrylyeo) wrote :

Removed the header.

What color should it be? The $ubuntu_orange used already looks the same as the color in the QML version.

Unless I'm mistaken, the Color example in the QML version reads "Call".

The icon set doesn't come with white versions, so I'll use a CSS filter as a workaround.

> A few comments:
>
> - could you remove the <header> in buttons.html ?
> - could you fix the color which shouldn't be orange?
> - could you make the text for the Color example the same as the qml one?
> - could you tweak the color for the "call" icon to match the qml one?

Revision history for this message
Darryl Yeo (darrylyeo) wrote :

Here's the comparison as it appears on my computer (QML left, HTML5 right). https://codein.withgoogle.com/serve/4690957861650432/

Revision history for this message
Darryl Yeo (darrylyeo) wrote :

Is this going to be merged in eventually?

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file '0.1/ambiance/css/appTemplate.css'
2--- 0.1/ambiance/css/appTemplate.css 2015-01-29 15:14:59 +0000
3+++ 0.1/ambiance/css/appTemplate.css 2015-12-17 23:19:27 +0000
4@@ -115,8 +115,7 @@
5 /* Hard reset
6 -------------------------------------------------- */
7 * {
8- outline: none;
9-}
10+ outline: none; }
11
12 html,
13 body,
14@@ -197,12 +196,10 @@
15 video {
16 padding: 0;
17 margin: 0;
18- border: 0;
19-}
20+ border: 0; }
21
22 ul {
23- list-style: none;
24-}
25+ list-style: none; }
26
27 /*
28 * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
29@@ -233,31 +230,27 @@
30 font-family: 'Ubuntu';
31 font-style: normal;
32 font-weight: 300;
33- src: local("Ubuntu Light"), local("Ubuntu-Light"), url(ubuntu-light.woff) format("woff");
34-}
35+ src: local("Ubuntu Light"), local("Ubuntu-Light"), url(ubuntu-light.woff) format("woff"); }
36 @font-face {
37 font-family: 'Ubuntu';
38 font-style: normal;
39 font-weight: 300;
40- src: local("Ubuntu Light"), local("Ubuntu-Light"), url(ubuntu-light.woff) format("woff");
41-}
42+ src: local("Ubuntu Light"), local("Ubuntu-Light"), url(ubuntu-light.woff) format("woff"); }
43 [data-role="header"] {
44 background: #ededed;
45 height: 60px;
46 width: 100%;
47 position: fixed;
48- z-index: 10;
49-}
50-[data-role="header"]:after {
51- background: #c2c2c2;
52- content: "";
53- border-top: 1px solid #afafaf;
54- height: 15px;
55- width: 100%;
56- display: block;
57- position: absolute;
58- top: 60px;
59-}
60+ z-index: 10; }
61+ [data-role="header"]:after {
62+ background: #c2c2c2;
63+ content: "";
64+ border-top: 1px solid #afafaf;
65+ height: 15px;
66+ width: 100%;
67+ display: block;
68+ position: absolute;
69+ top: 60px; }
70
71 [data-role="tabs"] {
72 background: #ededed;
73@@ -273,12 +266,10 @@
74 z-index: 9;
75 visibility: hidden;
76 opacity: 0;
77- transition: all 0.2s;
78-}
79-[data-role="tabs"].opened {
80- visibility: visible;
81- opacity: 1;
82-}
83+ transition: all 0.2s; }
84+ [data-role="tabs"].opened {
85+ visibility: visible;
86+ opacity: 1; }
87
88 [data-role="tabitem"] {
89 position: relative;
90@@ -286,20 +277,15 @@
91 border-bottom: 1px solid #d9d9d9;
92 text-align: left;
93 font-size: 0.9rem;
94- cursor: pointer;
95-}
96-[data-role="tabitem"]:only-child {
97- border-bottom: 0;
98-}
99-[data-role="tabitem"].active {
100- display: none;
101-}
102-[data-role="tabitem"].inactive {
103- display: block;
104-}
105-[data-role="tabitem"]:active {
106- background: rgba(0, 0, 0, 0.05);
107-}
108+ cursor: pointer; }
109+ [data-role="tabitem"]:only-child {
110+ border-bottom: 0; }
111+ [data-role="tabitem"].active {
112+ display: none; }
113+ [data-role="tabitem"].inactive {
114+ display: block; }
115+ [data-role="tabitem"]:active {
116+ background: rgba(0, 0, 0, 0.05); }
117
118 [data-role="back-btn"] {
119 background: #ededed;
120@@ -309,24 +295,20 @@
121 float: left;
122 cursor: pointer;
123 border: none;
124- position: relative;
125-}
126-[data-role="back-btn"]:after {
127- content: "";
128- display: block;
129- width: 20px;
130- height: 20px;
131- background: transparent url("/usr/share/icons/suru/actions/scalable/back.svg") no-repeat center center;
132- background-size: 100%;
133- margin: 0 auto;
134-}
135-[data-role="back-btn"]:disabled {
136- background: transparent;
137- width: 0;
138-}
139-[data-role="back-btn"]:active {
140- background: rgba(0, 0, 0, 0.05);
141-}
142+ position: relative; }
143+ [data-role="back-btn"]:after {
144+ content: "";
145+ display: block;
146+ width: 20px;
147+ height: 20px;
148+ background: transparent url("/usr/share/icons/suru/actions/scalable/back.svg") no-repeat center center;
149+ background-size: 100%;
150+ margin: 0 auto; }
151+ [data-role="back-btn"]:disabled {
152+ background: transparent;
153+ width: 0; }
154+ [data-role="back-btn"]:active {
155+ background: rgba(0, 0, 0, 0.05); }
156
157 [data-role="tabs-btn"] {
158 background: #ededed;
159@@ -337,27 +319,23 @@
160 cursor: pointer;
161 border: none;
162 position: relative;
163- z-index: 10;
164-}
165-[data-role="tabs-btn"]:after {
166- content: "";
167- display: block;
168- width: 20px;
169- height: 20px;
170- background: transparent url("/usr/share/icons/suru/actions/scalable/navigation-menu.svg") no-repeat center center;
171- background-size: 100%;
172- margin: 0 auto;
173-}
174-[data-role="tabs-btn"]:active {
175- background: rgba(0, 0, 0, 0.05);
176-}
177+ z-index: 10; }
178+ [data-role="tabs-btn"]:after {
179+ content: "";
180+ display: block;
181+ width: 20px;
182+ height: 20px;
183+ background: transparent url("/usr/share/icons/suru/actions/scalable/navigation-menu.svg") no-repeat center center;
184+ background-size: 100%;
185+ margin: 0 auto; }
186+ [data-role="tabs-btn"]:active {
187+ background: rgba(0, 0, 0, 0.05); }
188
189 [data-role="back-btn"]:disabled + [data-role="tabtitle"],
190 [data-role="back-btn"] + [data-role="tabtitle"],
191 [data-role="tabs-btn"] + [data-role="tabtitle"],
192 [data-role="tabs"] + [data-role="tabtitle"] {
193- width: calc(100% - 140px);
194-}
195+ width: calc(100% - 140px); }
196
197 [data-role="tabtitle"] {
198 font-family: "Ubuntu";
199@@ -373,8 +351,7 @@
200 overflow: hidden;
201 text-overflow: ellipsis;
202 position: relative;
203- z-index: 10;
204-}
205+ z-index: 10; }
206
207 [data-role="tab"] {
208 -webkit-box-sizing: border-box;
209@@ -383,11 +360,9 @@
210 width: 100%;
211 height: 100%;
212 overflow: hidden;
213- display: none;
214-}
215-[data-role="tab"]:first-child {
216- display: block;
217-}
218+ display: none; }
219+ [data-role="tab"]:first-child {
220+ display: block; }
221
222 [data-role="actions"] {
223 float: right;
224@@ -396,59 +371,48 @@
225 padding-right: 8px;
226 background: #ededed;
227 position: relative;
228- z-index: 10;
229-}
230-[data-role="actions"] button {
231- border: 0;
232- padding: 0;
233- width: 40px;
234- height: 60px;
235- line-height: 60px;
236- cursor: pointer;
237- float: left;
238- background: transparent;
239-}
240-[data-role="actions"] button img {
241- position: relative;
242- top: 5px;
243-}
244-[data-role="actions"] button:disabled {
245- opacity: 0.3;
246-}
247-[data-role="actions"] button:after {
248- content: "";
249- display: block;
250- width: 20px;
251- height: 20px;
252- background: transparent;
253- background-size: 100%;
254- margin: 0 auto;
255-}
256-[data-role="actions"] button:active {
257- background: rgba(0, 0, 0, 0.05);
258-}
259-[data-role="actions"] [data-role="actions-wrapper"] {
260- display: none;
261-}
262-[data-role="actions"] [data-role="actions-wrapper"]:first-child {
263- display: block;
264-}
265+ z-index: 10; }
266+ [data-role="actions"] button {
267+ border: 0;
268+ padding: 0;
269+ width: 40px;
270+ height: 60px;
271+ line-height: 60px;
272+ cursor: pointer;
273+ float: left;
274+ background: transparent; }
275+ [data-role="actions"] button img {
276+ position: relative;
277+ top: 5px; }
278+ [data-role="actions"] button:disabled {
279+ opacity: 0.3; }
280+ [data-role="actions"] button:after {
281+ content: "";
282+ display: block;
283+ width: 20px;
284+ height: 20px;
285+ background: transparent;
286+ background-size: 100%;
287+ margin: 0 auto; }
288+ [data-role="actions"] button:active {
289+ background: rgba(0, 0, 0, 0.05); }
290+ [data-role="actions"] [data-role="actions-wrapper"] {
291+ display: none; }
292+ [data-role="actions"] [data-role="actions-wrapper"]:first-child {
293+ display: block; }
294
295 [data-role="actions-overflow-icon"] {
296- background: transparent;
297-}
298-[data-role="actions-overflow-icon"]:after {
299- content: "";
300- display: block;
301- width: 20px;
302- height: 20px;
303- background: transparent url("/usr/share/icons/suru/actions/scalable/contextual-menu.svg") no-repeat center center !important;
304- background-size: 100% !important;
305- margin: 0 auto;
306-}
307-[data-role="actions-overflow-icon"]:active {
308- background: rgba(0, 0, 0, 0.05);
309-}
310+ background: transparent; }
311+ [data-role="actions-overflow-icon"]:after {
312+ content: "";
313+ display: block;
314+ width: 20px;
315+ height: 20px;
316+ background: transparent url("/usr/share/icons/suru/actions/scalable/contextual-menu.svg") no-repeat center center !important;
317+ background-size: 100% !important;
318+ margin: 0 auto; }
319+ [data-role="actions-overflow-icon"]:active {
320+ background: rgba(0, 0, 0, 0.05); }
321
322 [data-role="actions-overflow-list"] {
323 background: #ededed;
324@@ -464,32 +428,27 @@
325 z-index: 9;
326 visibility: hidden;
327 opacity: 0;
328- transition: all 0.2s;
329-}
330-[data-role="actions-overflow-list"].opened {
331- visibility: visible;
332- opacity: 1;
333-}
334-[data-role="actions-overflow-list"] li {
335- position: relative;
336- padding: 16px 16px;
337- border-bottom: 1px solid #d9d9d9;
338- text-align: left;
339- font-size: 0.8rem;
340- cursor: pointer;
341- text-align: left;
342- padding-left: 45px;
343- cursor: pointer;
344- background: transparent no-repeat center left;
345- background-size: 20px;
346- background-position-x: 10px;
347-}
348-[data-role="actions-overflow-list"] li:only-child {
349- border-bottom: 0;
350-}
351-[data-role="actions-overflow-list"] li:active {
352- background-color: rgba(0, 0, 0, 0.05);
353-}
354+ transition: all 0.2s; }
355+ [data-role="actions-overflow-list"].opened {
356+ visibility: visible;
357+ opacity: 1; }
358+ [data-role="actions-overflow-list"] li {
359+ position: relative;
360+ padding: 16px 16px;
361+ border-bottom: 1px solid #d9d9d9;
362+ text-align: left;
363+ font-size: 0.8rem;
364+ cursor: pointer;
365+ text-align: left;
366+ padding-left: 45px;
367+ cursor: pointer;
368+ background: transparent no-repeat center left;
369+ background-size: 20px;
370+ background-position-x: 10px; }
371+ [data-role="actions-overflow-list"] li:only-child {
372+ border-bottom: 0; }
373+ [data-role="actions-overflow-list"] li:active {
374+ background-color: rgba(0, 0, 0, 0.05); }
375
376 [data-role="overlay"] {
377 position: fixed;
378@@ -499,11 +458,9 @@
379 left: 0;
380 z-index: 9;
381 background: transparent;
382- display: none;
383-}
384-[data-role="overlay"].active {
385- display: block;
386-}
387+ display: none; }
388+ [data-role="overlay"].active {
389+ display: block; }
390
391 /*
392 * Copyright (C) 2013, 2014 Adnane Belmadiaf <daker@ubuntu.com>
393@@ -533,16 +490,13 @@
394 width: 26px;
395 height: 26px;
396 display: inline-block;
397- vertical-align: middle;
398-}
399-[data-role="icon"][data-icon="call"] {
400- background: url("/usr/share/icons/suru/actions/scalable/icon-call.svg") no-repeat scroll center center transparent;
401- background-size: 26px;
402-}
403-[data-role="icon"][data-icon="caret"] {
404- background: url(../img/chevron_down@30.png) no-repeat scroll center center transparent;
405- background-size: 26px;
406-}
407+ vertical-align: middle; }
408+ [data-role="icon"][data-icon="call"] {
409+ background: url("/usr/share/icons/suru/actions/scalable/call-start.svg") no-repeat scroll center center transparent;
410+ background-size: 26px; }
411+ [data-role="icon"][data-icon="caret"] {
412+ background: url(../img/chevron_down@30.png) no-repeat scroll center center transparent;
413+ background-size: 26px; }
414
415 /*
416 * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
417@@ -571,8 +525,7 @@
418 [data-role="pagestack"] {
419 position: relative;
420 -webkit-transition: all 0 linear;
421- transition: all 0 linear;
422-}
423+ transition: all 0 linear; }
424
425 [data-role="page"] {
426 -webkit-box-sizing: border-box;
427@@ -581,13 +534,11 @@
428 width: 100%;
429 height: 100%;
430 overflow: hidden;
431- display: none;
432-}
433+ display: none; }
434
435 [data-role="pagestack"] > [data-role="page"]:first-child,
436 [data-role="mainview"] > [data-role="page"] {
437- display: block;
438-}
439+ display: block; }
440
441 /*
442 * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
443@@ -629,52 +580,46 @@
444 color: #757373;
445 font-family: Ubuntu;
446 font-size: 0.8rem;
447- padding: 8px;
448-}
449-input[type="text"]:focus,
450-input[type="password"]:focus,
451-input[type="email"]:focus,
452-input[type="tel"]:focus,
453-input[type="search"]:focus,
454-input[type="url"]:focus,
455-input[type="number"]:focus,
456-textarea:focus {
457- background: #fff;
458- color: #757373;
459- font-family: Ubuntu;
460-}
461-input[type="text"][disabled],
462-input[type="password"][disabled],
463-input[type="email"][disabled],
464-input[type="tel"][disabled],
465-input[type="search"][disabled],
466-input[type="url"][disabled],
467-input[type="number"][disabled],
468-textarea[disabled] {
469- background: rgba(255, 255, 255, 0.1);
470- color: darkgray;
471-}
472-input[type="text"]:not([value]),
473-input[type="password"]:not([value]),
474-input[type="email"]:not([value]),
475-input[type="tel"]:not([value]),
476-input[type="search"]:not([value]),
477-input[type="url"]:not([value]),
478-input[type="number"]:not([value]),
479-textarea:not([value]) {
480- color: #757373;
481-}
482+ padding: 8px; }
483+ input[type="text"]:focus,
484+ input[type="password"]:focus,
485+ input[type="email"]:focus,
486+ input[type="tel"]:focus,
487+ input[type="search"]:focus,
488+ input[type="url"]:focus,
489+ input[type="number"]:focus,
490+ textarea:focus {
491+ background: #fff;
492+ color: #757373;
493+ font-family: Ubuntu; }
494+ input[type="text"][disabled],
495+ input[type="password"][disabled],
496+ input[type="email"][disabled],
497+ input[type="tel"][disabled],
498+ input[type="search"][disabled],
499+ input[type="url"][disabled],
500+ input[type="number"][disabled],
501+ textarea[disabled] {
502+ background: rgba(255, 255, 255, 0.1);
503+ color: darkgray; }
504+ input[type="text"]:not([value]),
505+ input[type="password"]:not([value]),
506+ input[type="email"]:not([value]),
507+ input[type="tel"]:not([value]),
508+ input[type="search"]:not([value]),
509+ input[type="url"]:not([value]),
510+ input[type="number"]:not([value]),
511+ textarea:not([value]) {
512+ color: #757373; }
513
514 textarea {
515 resize: none;
516 height: 80px;
517- width: 190px;
518-}
519+ width: 190px; }
520
521 .textfield.clear:focus {
522- background: url(artwork/icon_clear@20.png) no-repeat 97% center white;
523- background-size: 12%;
524-}
525+ background: url(artwork/icon_clear@20.png) no-repeat 97% center #fff;
526+ background-size: 12%; }
527
528 .textfield.label,
529 .textarea.label {
530@@ -682,8 +627,7 @@
531 box-shadow: none;
532 background: none !important;
533 font-size: 12px;
534- padding: 0 !important;
535-}
536+ padding: 0 !important; }
537
538 /*
539 * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
540@@ -718,91 +662,72 @@
541 border-radius: 6px;
542 overflow: hidden;
543 /* Bigger Spinner */
544- /* Progress bar */
545-}
546-progress:after {
547- content: attr(data-percentage);
548- position: relative;
549- display: block;
550- width: 100%;
551- text-align: center;
552- color: #fff;
553- top: -28px;
554- opacity: 1;
555-}
556-progress:not([value]) {
557- background: url(../img/spinner@8.png) no-repeat center center/100% auto;
558- -webkit-animation: 1s rotate infinite steps(30);
559- animation: 1s rotate infinite steps(30);
560- width: 24px;
561- height: 24px;
562- border: none;
563- display: inline-block;
564- vertical-align: middle;
565-}
566-progress.bigger:not([value]) {
567- background: url(../img/spinner@30.png) no-repeat center center/100% auto;
568- width: 90px;
569- height: 90px;
570-}
571-progress:not([value])::-webkit-progress-bar {
572- background: none;
573- -webkit-box-shadow: none;
574-}
575-progress[value]::-webkit-progress-value {
576- width: 100%;
577- background: #2ab7ec;
578- border: none;
579- display: block;
580- -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
581- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
582-}
583-progress[value]::-webkit-progress-bar {
584- padding: 1px;
585- background-color: rgba(192, 192, 192, 0.1);
586- width: 100%;
587- height: 35px;
588- -webkit-box-sizing: border-box;
589- box-sizing: border-box;
590- border-radius: 6px;
591- padding: 0;
592- -webkit-box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.1);
593- box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.1);
594-}
595-progress[value].infinite::-webkit-progress-value {
596- -webkit-appearance: none;
597-}
598-progress.infinite:after {
599- content: "In progress";
600- -webkit-animation: 1.3s fade-in-out infinite;
601- animation: 1.3s fade-in-out infinite;
602- color: #fff;
603- text-shadow: none;
604-}
605+ /* Progress bar */ }
606+ progress:after {
607+ content: attr(data-percentage);
608+ position: relative;
609+ display: block;
610+ width: 100%;
611+ text-align: center;
612+ color: #fff;
613+ top: -28px;
614+ opacity: 1; }
615+ progress:not([value]) {
616+ background: url(../img/spinner@8.png) no-repeat center center/100% auto;
617+ -webkit-animation: 1s rotate infinite steps(30);
618+ animation: 1s rotate infinite steps(30);
619+ width: 24px;
620+ height: 24px;
621+ border: none;
622+ display: inline-block;
623+ vertical-align: middle; }
624+ progress.bigger:not([value]) {
625+ background: url(../img/spinner@30.png) no-repeat center center/100% auto;
626+ width: 90px;
627+ height: 90px; }
628+ progress:not([value])::-webkit-progress-bar {
629+ background: none;
630+ -webkit-box-shadow: none; }
631+ progress[value]::-webkit-progress-value {
632+ width: 100%;
633+ background: #2ab7ec;
634+ border: none;
635+ display: block;
636+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
637+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); }
638+ progress[value]::-webkit-progress-bar {
639+ padding: 1px;
640+ background-color: rgba(192, 192, 192, 0.1);
641+ width: 100%;
642+ height: 35px;
643+ -webkit-box-sizing: border-box;
644+ box-sizing: border-box;
645+ border-radius: 6px;
646+ padding: 0;
647+ -webkit-box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.1);
648+ box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.1); }
649+ progress[value].infinite::-webkit-progress-value {
650+ -webkit-appearance: none; }
651+ progress.infinite:after {
652+ content: "In progress";
653+ -webkit-animation: 1.3s fade-in-out infinite;
654+ animation: 1.3s fade-in-out infinite;
655+ color: #fff;
656+ text-shadow: none; }
657
658 /* Animations */
659 @-webkit-keyframes rotate {
660 from {
661- -webkit-transform: rotate(1deg);
662- }
663-
664+ -webkit-transform: rotate(1deg); }
665 to {
666- -webkit-transform: rotate(360deg);
667- }
668-}
669+ -webkit-transform: rotate(360deg); } }
670 @-webkit-keyframes fade-in-out {
671 0% {
672- opacity: 0;
673- }
674-
675+ opacity: 0; }
676 50% {
677- opacity: 1;
678- }
679-
680+ opacity: 1; }
681 100% {
682- opacity: 0;
683- }
684-}
685+ opacity: 0; } }
686 /*
687 * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
688 * License granted by Canonical Limited
689@@ -843,182 +768,123 @@
690 color: #fff;
691 text-align: center;
692 height: 100%;
693- display: none;
694-}
695-[data-role="dialog"].active {
696- display: block;
697-}
698-[data-role="dialog"] > section {
699- -webkit-box-sizing: border-box;
700- box-sizing: border-box;
701- font-size: 1.5rem;
702- color: #FAFAFA;
703- width: 100%;
704- display: inline-block;
705- /*overflow-y: scroll;*/
706- vertical-align: middle;
707- white-space: normal;
708-}
709-[data-role="dialog"]:before {
710- content: "";
711- display: inline-block;
712- vertical-align: middle;
713- width: 0.1rem;
714- height: 100%;
715- margin-left: -0.1rem;
716-}
717-[data-role="dialog"] h1 {
718- font-size: 1.3rem;
719- line-height: 1.5em;
720- color: rgba(255, 255, 255, 0.9);
721- margin: 0;
722-}
723-[data-role="dialog"] p {
724- font-size: 0.9rem;
725- line-height: 1.8em;
726- color: rgba(255, 255, 255, 0.6);
727- margin: 0;
728-}
729-[data-role="dialog"] menu {
730- -webkit-box-sizing: border-box;
731- box-sizing: border-box;
732- white-space: nowrap;
733- margin: 0 auto;
734- margin-top: 1rem;
735- display: block;
736- text-align: center;
737-}
738-[data-role="dialog"] menu [data-role="button"] {
739- display: block;
740- margin: 0 auto;
741- margin-bottom: 10px;
742- width: 200px;
743-}
744-[data-role="dialog"] menu [data-role="button"]:last-child {
745- margin-bottom: 0;
746-}
747+ display: none; }
748+ [data-role="dialog"].active {
749+ display: block; }
750+ [data-role="dialog"] > section {
751+ -webkit-box-sizing: border-box;
752+ box-sizing: border-box;
753+ font-size: 1.5rem;
754+ color: #FAFAFA;
755+ width: 100%;
756+ display: inline-block;
757+ /*overflow-y: scroll;*/
758+ vertical-align: middle;
759+ white-space: normal; }
760+ [data-role="dialog"]:before {
761+ content: "";
762+ display: inline-block;
763+ vertical-align: middle;
764+ width: 0.1rem;
765+ height: 100%;
766+ margin-left: -0.1rem; }
767+ [data-role="dialog"] h1 {
768+ font-size: 1.3rem;
769+ line-height: 1.5em;
770+ color: rgba(255, 255, 255, 0.9);
771+ margin: 0; }
772+ [data-role="dialog"] p {
773+ font-size: 0.9rem;
774+ line-height: 1.8em;
775+ color: rgba(255, 255, 255, 0.6);
776+ margin: 0; }
777+ [data-role="dialog"] menu {
778+ -webkit-box-sizing: border-box;
779+ box-sizing: border-box;
780+ white-space: nowrap;
781+ margin: 0 auto;
782+ margin-top: 1rem;
783+ display: block;
784+ text-align: center; }
785+ [data-role="dialog"] menu [data-role="button"] {
786+ display: block;
787+ margin: 0 auto;
788+ margin-bottom: 10px;
789+ width: 200px; }
790+ [data-role="dialog"] menu [data-role="button"]:last-child {
791+ margin-bottom: 0; }
792
793 /* Tablet */
794 @media only screen and (min-width: 870px) {
795 [data-role="dialog"] {
796 background: rgba(0, 0, 0, 0.6);
797- opacity: 1;
798- }
799- [data-role="dialog"] > section {
800- background: rgba(0, 0, 0, 0.7);
801- border-radius: 10px;
802- width: 18.7rem;
803- padding: 1.8rem;
804- }
805- [data-role="dialog"] input[type="text"],
806- [data-role="dialog"] input[type="password"],
807- [data-role="dialog"] input[type="email"],
808- [data-role="dialog"] input[type="tel"],
809- [data-role="dialog"] input[type="search"],
810- [data-role="dialog"] input[type="url"],
811- [data-role="dialog"] input[type="number"] {
812- width: 14rem;
813- }
814- [data-role="dialog"] menu [data-role="button"] {
815- width: 100%;
816- max-width: 100%;
817- }
818+ opacity: 1; }
819+ [data-role="dialog"] > section {
820+ background: rgba(0, 0, 0, 0.7);
821+ border-radius: 10px;
822+ width: 18.7rem;
823+ padding: 1.8rem; }
824+ [data-role="dialog"] input[type="text"],
825+ [data-role="dialog"] input[type="password"],
826+ [data-role="dialog"] input[type="email"],
827+ [data-role="dialog"] input[type="tel"],
828+ [data-role="dialog"] input[type="search"],
829+ [data-role="dialog"] input[type="url"],
830+ [data-role="dialog"] input[type="number"] {
831+ width: 14rem; }
832+ [data-role="dialog"] menu [data-role="button"] {
833+ width: 100%;
834+ max-width: 100%; }
835
836 @keyframes shake {
837 0% {
838- -webkit-transform: translate3d(0, 0, 0);
839- }
840-
841+ -webkit-transform: translate3d(0, 0, 0); }
842 10% {
843- -webkit-transform: translate3d(-20px, 0, 0);
844- }
845-
846+ -webkit-transform: translate3d(-20px, 0, 0); }
847 20% {
848- -webkit-transform: translate3d(20px, 0, 0);
849- }
850-
851+ -webkit-transform: translate3d(20px, 0, 0); }
852 30% {
853- -webkit-transform: translate3d(-20px, 0, 0);
854- }
855-
856+ -webkit-transform: translate3d(-20px, 0, 0); }
857 40% {
858- -webkit-transform: translate3d(20px, 0, 0);
859- }
860-
861+ -webkit-transform: translate3d(20px, 0, 0); }
862 50% {
863- -webkit-transform: translate3d(-20px, 0, 0);
864- }
865-
866+ -webkit-transform: translate3d(-20px, 0, 0); }
867 60% {
868- -webkit-transform: translate3d(20px, 0, 0);
869- }
870-
871+ -webkit-transform: translate3d(20px, 0, 0); }
872 70% {
873- -webkit-transform: translate3d(-20px, 0, 0);
874- }
875-
876+ -webkit-transform: translate3d(-20px, 0, 0); }
877 80% {
878- -webkit-transform: translate3d(20px, 0, 0);
879- }
880-
881+ -webkit-transform: translate3d(20px, 0, 0); }
882 90% {
883- -webkit-transform: translate3d(-20px, 0, 0);
884- }
885-
886+ -webkit-transform: translate3d(-20px, 0, 0); }
887 100% {
888- -webkit-transform: translate3d(0, 0, 0);
889- }
890- }
891+ -webkit-transform: translate3d(0, 0, 0); } }
892 @-webkit-keyframes shake {
893 0% {
894- -webkit-transform: translate3d(0, 0, 0);
895- }
896-
897+ -webkit-transform: translate3d(0, 0, 0); }
898 10% {
899- -webkit-transform: translate3d(-20px, 0, 0);
900- }
901-
902+ -webkit-transform: translate3d(-20px, 0, 0); }
903 20% {
904- -webkit-transform: translate3d(20px, 0, 0);
905- }
906-
907+ -webkit-transform: translate3d(20px, 0, 0); }
908 30% {
909- -webkit-transform: translate3d(-20px, 0, 0);
910- }
911-
912+ -webkit-transform: translate3d(-20px, 0, 0); }
913 40% {
914- -webkit-transform: translate3d(20px, 0, 0);
915- }
916-
917+ -webkit-transform: translate3d(20px, 0, 0); }
918 50% {
919- -webkit-transform: translate3d(-20px, 0, 0);
920- }
921-
922+ -webkit-transform: translate3d(-20px, 0, 0); }
923 60% {
924- -webkit-transform: translate3d(20px, 0, 0);
925- }
926-
927+ -webkit-transform: translate3d(20px, 0, 0); }
928 70% {
929- -webkit-transform: translate3d(-20px, 0, 0);
930- }
931-
932+ -webkit-transform: translate3d(-20px, 0, 0); }
933 80% {
934- -webkit-transform: translate3d(20px, 0, 0);
935- }
936-
937+ -webkit-transform: translate3d(20px, 0, 0); }
938 90% {
939- -webkit-transform: translate3d(-20px, 0, 0);
940- }
941-
942+ -webkit-transform: translate3d(-20px, 0, 0); }
943 100% {
944- -webkit-transform: translate3d(0, 0, 0);
945- }
946- }
947+ -webkit-transform: translate3d(0, 0, 0); } }
948 .shake {
949 -webkit-animation: shakeIt .9s ease-in;
950- animation: shakeIt .9s ease-in;
951- }
952-}
953+ animation: shakeIt .9s ease-in; } }
954 /*
955 * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
956 * License granted by Canonical Limited
957@@ -1044,45 +910,68 @@
958 * Buttons
959 * ---------------------------------- */
960 [data-role="button"] {
961+ -webkit-box-shadow: 0 2px 2px rgba(100, 100, 100, 0.4) inset;
962+ box-shadow: 0 2px 2px rgba(100, 100, 100, 0.4) inset;
963 -webkit-box-sizing: border-box;
964 box-sizing: border-box;
965 display: inline-block;
966- width: 100%;
967- height: 42px;
968- vertical-align: middle;
969- text-overflow: ellipsis;
970- white-space: nowrap;
971- overflow: hidden;
972+ min-width: 92px;
973+ height: 35px;
974+ line-height: 27px;
975+ padding: 4px 10px;
976 background: #dd4814;
977- border: 2px solid #dd4814;
978- border-radius: 6px;
979- color: white;
980+ border: none;
981+ border-radius: 9px/7px;
982+ color: #ffffff;
983 font-family: "Ubuntu";
984 font-size: 1rem;
985- padding: 9px 25px;
986+ overflow: hidden;
987+ position: relative;
988 text-align: center;
989 text-decoration: none;
990- position: relative;
991-}
992-[data-role="button"].positive {
993- background: #38b44a;
994- color: white;
995- border-color: #38b44a;
996-}
997-[data-role="button"].information {
998- background: #2ab7ec;
999- color: white;
1000- border-color: #2ab7ec;
1001-}
1002-[data-role="button"].secondary {
1003- background: white;
1004- color: #888888;
1005-}
1006-[data-role="button"].negative {
1007- background: #929292;
1008- color: white;
1009- border-color: #929292;
1010-}
1011+ text-overflow: ellipsis;
1012+ -webkit-transition: box-shadow 0.175s;
1013+ -moz-transition: box-shadow 0.175s;
1014+ -o-transition: box-shadow 0.175s;
1015+ transition: box-shadow 0.175s;
1016+ vertical-align: middle;
1017+ white-space: nowrap; }
1018+ [data-role="button"].positive {
1019+ background: #38b44a;
1020+ color: #ffffff;
1021+ border-color: #38b44a; }
1022+ [data-role="button"].information {
1023+ background: #2ab7ec;
1024+ color: #ffffff;
1025+ border-color: #2ab7ec; }
1026+ [data-role="button"].secondary {
1027+ background: #ffffff;
1028+ color: #888888; }
1029+ [data-role="button"].negative {
1030+ background: #ABA59F;
1031+ color: #ffffff;
1032+ border-color: #ABA59F; }
1033+ [data-role="button"].disabled {
1034+ color: rgba(255, 255, 255, 0.5); }
1035+ [data-role="button"]:not(.disabled):active {
1036+ -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4) inset, 0 0 200px rgba(0, 0, 0, 0.15) inset;
1037+ box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4) inset, 0 0 200px rgba(0, 0, 0, 0.15) inset; }
1038+ [data-role="button"] + [data-role="button"] {
1039+ margin-left: 15px; }
1040+ [data-role="button"] [data-role="icon"] {
1041+ display: inline-block;
1042+ height: 100%;
1043+ vertical-align: top;
1044+ -webkit-filter: brightness(2);
1045+ filter: brightness(2); }
1046+ [data-role="button"].icon-left [data-role="icon"] {
1047+ float: left;
1048+ margin-right: 5px; }
1049+ [data-role="button"].icon-right [data-role="icon"] {
1050+ float: right;
1051+ margin-left: 5px; }
1052+ [data-role="button"].disabled [data-role="icon"] {
1053+ opacity: 0.5; }
1054
1055 /*
1056 * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
1057@@ -1131,59 +1020,54 @@
1058 height: $range-track-height;
1059 background: $ubuntu_orange;
1060 content: ' ';
1061- }*/
1062-}
1063-input[type=range]::-webkit-slider-thumb {
1064- -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
1065- box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
1066- -webkit-box-sizing: border-box;
1067- box-sizing: border-box;
1068- -webkit-appearance: none;
1069- background-color: #fff;
1070- pointer-events: none;
1071- border-radius: 3px;
1072- width: 16px;
1073- height: 16px;
1074- position: relative;
1075-}
1076-input[type=range]::-webkit-slider-thumb:before {
1077- /* what creates the colorful line on the left side of the slider */
1078- position: absolute;
1079- top: 6px;
1080- left: -2000px;
1081- width: 2000px;
1082- height: 4px;
1083- background: #dd4814;
1084- content: ' ';
1085-}
1086-input[type=range]::-moz-range-track {
1087- -webkit-box-sizing: border-box;
1088- box-sizing: border-box;
1089- background: -moz-linear-gradient(to right, rgba(175, 175, 175, 0.3) 0%, rgba(175, 175, 175, 0.3) 100%);
1090- background-position: center;
1091- background-size: 99% 4px;
1092- background-repeat: no-repeat;
1093- width: auto;
1094- height: 36px;
1095- border: 0;
1096- border-radius: 1px;
1097- overflow: hidden;
1098- margin-top: 5px;
1099- margin-bottom: 5px;
1100-}
1101-input[type=range]::-moz-range-thumb {
1102- -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
1103- box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
1104- -webkit-box-sizing: border-box;
1105- box-sizing: border-box;
1106- background: #fff;
1107- pointer-events: none;
1108- border: 0;
1109- border-radius: 3px;
1110- width: 16px;
1111- height: 16px;
1112- position: relative;
1113-}
1114+ }*/ }
1115+ input[type=range]::-webkit-slider-thumb {
1116+ -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
1117+ box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
1118+ -webkit-box-sizing: border-box;
1119+ box-sizing: border-box;
1120+ -webkit-appearance: none;
1121+ background-color: #fff;
1122+ pointer-events: none;
1123+ border-radius: 3px;
1124+ width: 16px;
1125+ height: 16px;
1126+ position: relative; }
1127+ input[type=range]::-webkit-slider-thumb:before {
1128+ /* what creates the colorful line on the left side of the slider */
1129+ position: absolute;
1130+ top: 6px;
1131+ left: -2000px;
1132+ width: 2000px;
1133+ height: 4px;
1134+ background: #dd4814;
1135+ content: ' '; }
1136+ input[type=range]::-moz-range-track {
1137+ -webkit-box-sizing: border-box;
1138+ box-sizing: border-box;
1139+ background: -moz-linear-gradient(to right, rgba(175, 175, 175, 0.3) 0%, rgba(175, 175, 175, 0.3) 100%);
1140+ background-position: center;
1141+ background-size: 99% 4px;
1142+ background-repeat: no-repeat;
1143+ width: auto;
1144+ height: 36px;
1145+ border: 0;
1146+ border-radius: 1px;
1147+ overflow: hidden;
1148+ margin-top: 5px;
1149+ margin-bottom: 5px; }
1150+ input[type=range]::-moz-range-thumb {
1151+ -webkit-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
1152+ box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2);
1153+ -webkit-box-sizing: border-box;
1154+ box-sizing: border-box;
1155+ background: #fff;
1156+ pointer-events: none;
1157+ border: 0;
1158+ border-radius: 3px;
1159+ width: 16px;
1160+ height: 16px;
1161+ position: relative; }
1162
1163 /*
1164 * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
1165@@ -1212,47 +1096,41 @@
1166 width: 4.5rem;
1167 height: 2.2rem;
1168 position: relative;
1169- background: none;
1170-}
1171-label:not([for]) input[type="checkbox"] {
1172- margin: 0;
1173- opacity: 0;
1174- position: absolute;
1175- top: 0;
1176- left: 0;
1177-}
1178-label:not([for]) input[type="checkbox"] + span {
1179- -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
1180- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
1181- -webkit-box-sizing: border-box;
1182- box-sizing: border-box;
1183- position: absolute;
1184- left: 50%;
1185- top: 50%;
1186- margin: -1.1rem 0 0 -1.1rem;
1187- width: 2rem;
1188- height: 2rem;
1189- pointer-events: none;
1190- border-radius: 6px;
1191- background: rgba(0, 0, 0, 0.4);
1192- background-position-y: 30px;
1193- -webkit-transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
1194- transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
1195-}
1196-label:not([for]) input[type="checkbox"]:checked + span {
1197- background: #dd4814 url(../img/tick-white@30.png) no-repeat 0.3rem 0.3rem;
1198- background-size: 75% 75%;
1199- background-position-y: 5px;
1200- -webkit-transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
1201- transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
1202-}
1203-label:not([for]) input[type="checkbox"]:disabled + span {
1204- background: rgba(0, 0, 0, 0.25) !important;
1205-}
1206-label:not([for]) input[type="checkbox"]:disabled:checked + span {
1207- background: rgba(221, 72, 20, 0.5) url(../img/tick-white@30.png) no-repeat 0.3rem 0.3rem !important;
1208- background-size: 75% 75% !important;
1209-}
1210+ background: none; }
1211+ label:not([for]) input[type="checkbox"] {
1212+ margin: 0;
1213+ opacity: 0;
1214+ position: absolute;
1215+ top: 0;
1216+ left: 0; }
1217+ label:not([for]) input[type="checkbox"] + span {
1218+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
1219+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
1220+ -webkit-box-sizing: border-box;
1221+ box-sizing: border-box;
1222+ position: absolute;
1223+ left: 50%;
1224+ top: 50%;
1225+ margin: -1.1rem 0 0 -1.1rem;
1226+ width: 2rem;
1227+ height: 2rem;
1228+ pointer-events: none;
1229+ border-radius: 6px;
1230+ background: rgba(0, 0, 0, 0.4);
1231+ background-position-y: 30px;
1232+ -webkit-transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
1233+ transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out; }
1234+ label:not([for]) input[type="checkbox"]:checked + span {
1235+ background: #dd4814 url(../img/tick-white@30.png) no-repeat 0.3rem 0.3rem;
1236+ background-size: 75% 75%;
1237+ background-position-y: 5px;
1238+ -webkit-transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out;
1239+ transition: background-image 0.3s ease-in-out, background-color 0.3s ease-in-out, background-position 0.3s ease-in-out; }
1240+ label:not([for]) input[type="checkbox"]:disabled + span {
1241+ background: rgba(0, 0, 0, 0.25) !important; }
1242+ label:not([for]) input[type="checkbox"]:disabled:checked + span {
1243+ background: rgba(221, 72, 20, 0.5) url(../img/tick-white@30.png) no-repeat 0.3rem 0.3rem !important;
1244+ background-size: 75% 75% !important; }
1245
1246 label input[type="checkbox"][data-type="switch"] + span.toggle {
1247 position: absolute;
1248@@ -1263,60 +1141,51 @@
1249 height: 2.2rem;
1250 pointer-events: none;
1251 overflow: hidden;
1252- background: rgba(136, 136, 136, 0.3);
1253-}
1254-label input[type="checkbox"][data-type="switch"] + span.toggle > span.toggle-bg {
1255- background: transparent url(../img/unCheckbox.png) no-repeat 0.4rem 0.35rem;
1256- background-size: 90% 75%;
1257- position: absolute;
1258- top: 0;
1259- left: 0;
1260- z-index: 10;
1261- width: 4.5rem;
1262- height: 2.1rem;
1263- -webkit-transition: background-image 0.3s ease-in-out;
1264- transition: background-image 0.3s ease-in-out;
1265-}
1266-label input[type="checkbox"][data-type="switch"] + span.toggle > span.toggle-handle {
1267- -webkit-box-sizing: border-box;
1268- box-sizing: border-box;
1269- -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
1270- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
1271- position: absolute;
1272- top: 2px;
1273- left: 2px;
1274- z-index: 2;
1275- width: 2rem;
1276- height: 2rem;
1277- border-radius: 6px;
1278- background: rgba(0, 0, 0, 0.4);
1279- -webkit-transition: background 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
1280- transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
1281-}
1282+ background: rgba(136, 136, 136, 0.3); }
1283+ label input[type="checkbox"][data-type="switch"] + span.toggle > span.toggle-bg {
1284+ background: transparent url(../img/unCheckbox.png) no-repeat 0.4rem 0.35rem;
1285+ background-size: 90% 75%;
1286+ position: absolute;
1287+ top: 0;
1288+ left: 0;
1289+ z-index: 10;
1290+ width: 4.5rem;
1291+ height: 2.1rem;
1292+ -webkit-transition: background-image 0.3s ease-in-out;
1293+ transition: background-image 0.3s ease-in-out; }
1294+ label input[type="checkbox"][data-type="switch"] + span.toggle > span.toggle-handle {
1295+ -webkit-box-sizing: border-box;
1296+ box-sizing: border-box;
1297+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
1298+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.3);
1299+ position: absolute;
1300+ top: 2px;
1301+ left: 2px;
1302+ z-index: 2;
1303+ width: 2rem;
1304+ height: 2rem;
1305+ border-radius: 6px;
1306+ background: rgba(0, 0, 0, 0.4);
1307+ -webkit-transition: background 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
1308+ transition: background 0.3s ease-in-out, transform 0.3s ease-in-out; }
1309 label input[type="checkbox"][data-type="switch"]:checked + span.toggle {
1310- background: rgba(136, 136, 136, 0.3) !important;
1311-}
1312-label input[type="checkbox"][data-type="switch"]:checked + span.toggle > span.toggle-bg {
1313- background: transparent url(../img/Checkbox.png) no-repeat 0.4rem 0.35rem;
1314- background-size: 90% 75%;
1315-}
1316-label input[type="checkbox"][data-type="switch"]:checked + span.toggle > span.toggle-handle {
1317- background: #dd4814;
1318- -webkit-transform: translate3d(38px, 0, 0);
1319- transform: translate3d(38px, 0, 0);
1320-}
1321+ background: rgba(136, 136, 136, 0.3) !important; }
1322+ label input[type="checkbox"][data-type="switch"]:checked + span.toggle > span.toggle-bg {
1323+ background: transparent url(../img/Checkbox.png) no-repeat 0.4rem 0.35rem;
1324+ background-size: 90% 75%; }
1325+ label input[type="checkbox"][data-type="switch"]:checked + span.toggle > span.toggle-handle {
1326+ background: #dd4814;
1327+ -webkit-transform: translate3d(38px, 0, 0);
1328+ transform: translate3d(38px, 0, 0); }
1329
1330 label input[data-type="switch"]:disabled + span.toggle {
1331- background: rgba(136, 136, 136, 0.3) !important;
1332-}
1333-label input[data-type="switch"]:disabled + span.toggle > span.toggle-handle {
1334- opacity: 0.4;
1335-}
1336+ background: rgba(136, 136, 136, 0.3) !important; }
1337+ label input[data-type="switch"]:disabled + span.toggle > span.toggle-handle {
1338+ opacity: 0.4; }
1339 label input[data-type="switch"]:disabled:checked + span.toggle > span.toggle-handle {
1340 opacity: 0.4;
1341 -webkit-transform: translate3d(38px, 0, 0);
1342- transform: translate3d(38px, 0, 0);
1343-}
1344+ transform: translate3d(38px, 0, 0); }
1345
1346 /*
1347 * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
1348@@ -1342,20 +1211,17 @@
1349 .has_actions {
1350 top: 65px !important;
1351 left: 10px !important;
1352- right: 10px;
1353-}
1354-.has_actions li {
1355- text-align: left !important;
1356- padding-left: 45px !important;
1357- cursor: pointer;
1358- background: transparent no-repeat center left;
1359- background-size: 25px;
1360- background-position-x: 10px;
1361-}
1362-.has_actions:before {
1363- right: 5px;
1364- left: auto !important;
1365-}
1366+ right: 10px; }
1367+ .has_actions li {
1368+ text-align: left !important;
1369+ padding-left: 45px !important;
1370+ cursor: pointer;
1371+ background: transparent no-repeat center left;
1372+ background-size: 25px;
1373+ background-position-x: 10px; }
1374+ .has_actions:before {
1375+ right: 5px;
1376+ left: auto !important; }
1377
1378 .popover,
1379 [data-role="popover"] {
1380@@ -1375,63 +1241,55 @@
1381 -webkit-transform: scaleY(0);
1382 transform: scaleY(0);
1383 -webkit-transition: -webkit-transform 0.1s;
1384- transition: transform 0.1s;
1385-}
1386-.popover.active,
1387-[data-role="popover"].active {
1388- visibility: visible;
1389- opacity: 1;
1390- -webkit-transform: scaleY(1);
1391- transform: scaleY(1);
1392-}
1393-.popover .list,
1394-.popover ul,
1395-[data-role="popover"] .list,
1396-[data-role="popover"] ul {
1397- -webkit-border-radius: 8px;
1398- border-radius: 8px;
1399- width: auto;
1400- max-height: 250px;
1401- overflow: auto;
1402- -webkit-overflow-scrolling: touch;
1403-}
1404-.popover .list li,
1405-.popover ul li,
1406-[data-role="popover"] .list li,
1407-[data-role="popover"] ul li {
1408- position: relative;
1409- padding: 16px 20px;
1410- border-bottom: 1px solid #d9d9d9;
1411- text-align: center;
1412- font-size: 0.9rem;
1413-}
1414-.popover .list li a,
1415-.popover ul li a,
1416-[data-role="popover"] .list li a,
1417-[data-role="popover"] ul li a {
1418- color: #787878;
1419- text-decoration: none;
1420-}
1421-.popover .list li.active,
1422-.popover ul li.active,
1423-[data-role="popover"] .list li.active,
1424-[data-role="popover"] ul li.active {
1425- background: #ebebeb;
1426- border-top: 1px solid #fcfcfc;
1427-}
1428-.popover .list li.active a,
1429-.popover ul li.active a,
1430-[data-role="popover"] .list li.active a,
1431-[data-role="popover"] ul li.active a {
1432- color: #dd4814;
1433- text-decoration: none;
1434-}
1435-.popover .list li:only-child,
1436-.popover ul li:only-child,
1437-[data-role="popover"] .list li:only-child,
1438-[data-role="popover"] ul li:only-child {
1439- border-bottom: 0;
1440-}
1441+ transition: transform 0.1s; }
1442+ .popover.active,
1443+ [data-role="popover"].active {
1444+ visibility: visible;
1445+ opacity: 1;
1446+ -webkit-transform: scaleY(1);
1447+ transform: scaleY(1); }
1448+ .popover .list,
1449+ .popover ul,
1450+ [data-role="popover"] .list,
1451+ [data-role="popover"] ul {
1452+ -webkit-border-radius: 8px;
1453+ border-radius: 8px;
1454+ width: auto;
1455+ max-height: 250px;
1456+ overflow: auto;
1457+ -webkit-overflow-scrolling: touch; }
1458+ .popover .list li,
1459+ .popover ul li,
1460+ [data-role="popover"] .list li,
1461+ [data-role="popover"] ul li {
1462+ position: relative;
1463+ padding: 16px 20px;
1464+ border-bottom: 1px solid #d9d9d9;
1465+ text-align: center;
1466+ font-size: 0.9rem; }
1467+ .popover .list li a,
1468+ .popover ul li a,
1469+ [data-role="popover"] .list li a,
1470+ [data-role="popover"] ul li a {
1471+ color: #787878;
1472+ text-decoration: none; }
1473+ .popover .list li.active,
1474+ .popover ul li.active,
1475+ [data-role="popover"] .list li.active,
1476+ [data-role="popover"] ul li.active {
1477+ background: #ebebeb;
1478+ border-top: 1px solid #fcfcfc; }
1479+ .popover .list li.active a,
1480+ .popover ul li.active a,
1481+ [data-role="popover"] .list li.active a,
1482+ [data-role="popover"] ul li.active a {
1483+ color: #dd4814;
1484+ text-decoration: none; }
1485+ .popover .list li:only-child,
1486+ .popover ul li:only-child,
1487+ [data-role="popover"] .list li:only-child,
1488+ [data-role="popover"] ul li:only-child {
1489+ border-bottom: 0; }
1490
1491 /* Caret */
1492 .popover[data-gravity]:before,
1493@@ -1442,8 +1300,7 @@
1494 left: 50%;
1495 width: 0;
1496 height: 0;
1497- content: '';
1498-}
1499+ content: ''; }
1500
1501 .popover[data-gravity="n"]:before,
1502 [data-role="popover"][data-gravity="n"]:before {
1503@@ -1452,8 +1309,7 @@
1504 background: transparent url(../img/UpArrow@18.png) no-repeat 0.5rem 0.5rem;
1505 background-size: 50% 50%;
1506 width: 28px;
1507- height: 15px;
1508-}
1509+ height: 15px; }
1510
1511 .popover[data-gravity="w"]:before,
1512 [data-role="popover"][data-gravity="w"]:before {
1513@@ -1464,8 +1320,7 @@
1514 background-size: 50% 50%;
1515 width: 18px;
1516 height: 37px;
1517- left: 0;
1518-}
1519+ left: 0; }
1520
1521 .popover[data-gravity="s"]:after,
1522 [data-role="popover"][data-gravity="s"]:after {
1523@@ -1474,8 +1329,7 @@
1524 background: transparent url(../img/DownArrow@18.png) no-repeat 0.5rem 0.5rem;
1525 background-size: 50% 50%;
1526 width: 37px;
1527- height: 18px;
1528-}
1529+ height: 18px; }
1530
1531 .popover[data-gravity="e"]:before,
1532 [data-role="popover"][data-gravity="e"]:before {
1533@@ -1487,35 +1341,28 @@
1534 width: 18px;
1535 height: 37px;
1536 right: 0;
1537- left: initial;
1538-}
1539+ left: initial; }
1540
1541 .has_tabs {
1542 top: 65px;
1543 left: 10px;
1544- right: 10px;
1545-}
1546-.has_tabs li {
1547- text-align: left !important;
1548- padding-left: 20px !important;
1549- cursor: pointer;
1550-}
1551-.has_tabs:before {
1552- left: 30px !important;
1553-}
1554+ right: 10px; }
1555+ .has_tabs li {
1556+ text-align: left !important;
1557+ padding-left: 20px !important;
1558+ cursor: pointer; }
1559+ .has_tabs:before {
1560+ left: 30px !important; }
1561
1562 /* Tablet */
1563 @media only screen and (min-width: 870px) {
1564 .popover,
1565 [data-role="popover"] {
1566- width: 320px;
1567- }
1568+ width: 320px; }
1569
1570 .has_actions {
1571 left: auto !important;
1572- right: 10px !important;
1573- }
1574-}
1575+ right: 10px !important; } }
1576 /*
1577 * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
1578 * License granted by Canonical Limited
1579@@ -1541,116 +1388,101 @@
1580 * Lists
1581 * ---------------------------------- */
1582 [data-role="list"] {
1583- border-top: 1px solid #f0f0f0;
1584-}
1585-[data-role="list"] header {
1586- border-bottom: 0.1rem solid #c9c9c9;
1587- line-height: 1.8rem;
1588- color: #787878;
1589- font-size: 0.9rem;
1590- padding-left: 1rem;
1591-}
1592-[data-role="list"] ul {
1593- list-style: none;
1594- overflow: hidden;
1595-}
1596-[data-role="list"] ul li {
1597- -webkit-box-sizing: border-box;
1598- box-sizing: border-box;
1599- width: 100%;
1600- height: 3.1rem;
1601- border-bottom: solid 0.1rem #c7c7c7;
1602- color: #787878;
1603- position: relative;
1604-}
1605-[data-role="list"] ul li > a {
1606- text-decoration: none;
1607- color: #787878;
1608- display: block;
1609- height: 3rem;
1610- position: relative;
1611- border: none;
1612- line-height: 3rem;
1613- padding-left: 1rem;
1614- padding-right: 1.5rem;
1615- border-top: 1px solid #ebebeb;
1616- font-size: 0.9rem;
1617- white-space: nowrap;
1618- overflow: hidden;
1619- text-overflow: ellipsis;
1620-}
1621-[data-role="list"] ul li > a:after {
1622- content: "";
1623- background: transparent url(../img/chevron@27.png) no-repeat 0.5rem 0.5rem;
1624- background-size: 40% 75%;
1625- position: absolute;
1626- width: 2rem;
1627- height: 2rem;
1628- top: 50%;
1629- right: 0;
1630- margin-top: -1.2rem;
1631- z-index: 0;
1632-}
1633-[data-role="list"] ul li > a:active {
1634- background: #e6e6e6;
1635- border-color: #ebebeb;
1636-}
1637-[data-role="list"] ul li p {
1638- white-space: nowrap;
1639- overflow: hidden;
1640- text-overflow: ellipsis;
1641- border: none;
1642- display: block;
1643- color: #787878;
1644- font-size: 0.9rem;
1645- padding-left: 1rem;
1646- padding-top: 0.5rem;
1647- line-height: 1rem;
1648-}
1649-[data-role="list"] ul li p:only-child, [data-role="list"] ul li p:first-of-type:last-of-type {
1650- line-height: 2.1rem;
1651-}
1652-[data-role="list"] ul li p + p {
1653- color: rgba(136, 136, 136, 0.8);
1654- padding-top: 0.1rem;
1655- font-size: 0.8rem;
1656-}
1657-[data-role="list"] ul li > label {
1658- z-index: 9;
1659- width: 4.5rem;
1660- height: 2.2rem;
1661- right: 0.5rem;
1662- margin-top: -1.1rem;
1663- position: absolute;
1664- top: 50%;
1665-}
1666-[data-role="list"] aside {
1667- float: left;
1668- margin: -1.2em 0 0 0;
1669- max-width: 100%;
1670- vertical-align: bottom;
1671- position: relative;
1672- top: 50%;
1673- z-index: 2;
1674-}
1675-[data-role="list"] aside img {
1676- border-radius: 6px;
1677- margin-bottom: 0;
1678- float: left;
1679-}
1680-[data-role="list"] aside:after {
1681- background: url(../img/ubuntushape_medium_radius_idle@18.png) no-repeat;
1682- background-size: 100% 100%;
1683- content: ' ';
1684- width: 100%;
1685- height: 100%;
1686- position: absolute;
1687- top: 0;
1688- left: 0;
1689-}
1690-[data-role="list"] > header + ul li {
1691- padding-left: 20px;
1692-}
1693+ border-top: 1px solid #f0f0f0; }
1694+ [data-role="list"] header {
1695+ border-bottom: 0.1rem solid #c9c9c9;
1696+ line-height: 1.8rem;
1697+ color: #787878;
1698+ font-size: 0.9rem;
1699+ padding-left: 1rem; }
1700+ [data-role="list"] ul {
1701+ list-style: none;
1702+ overflow: hidden; }
1703+ [data-role="list"] ul li {
1704+ -webkit-box-sizing: border-box;
1705+ box-sizing: border-box;
1706+ width: 100%;
1707+ height: 3.1rem;
1708+ border-bottom: solid 0.1rem #c7c7c7;
1709+ color: #787878;
1710+ position: relative; }
1711+ [data-role="list"] ul li > a {
1712+ text-decoration: none;
1713+ color: #787878;
1714+ display: block;
1715+ height: 3rem;
1716+ position: relative;
1717+ border: none;
1718+ line-height: 3rem;
1719+ padding-left: 1rem;
1720+ padding-right: 1.5rem;
1721+ border-top: 1px solid #ebebeb;
1722+ font-size: 0.9rem;
1723+ white-space: nowrap;
1724+ overflow: hidden;
1725+ text-overflow: ellipsis; }
1726+ [data-role="list"] ul li > a:after {
1727+ content: "";
1728+ background: transparent url(../img/chevron@27.png) no-repeat 0.5rem 0.5rem;
1729+ background-size: 40% 75%;
1730+ position: absolute;
1731+ width: 2rem;
1732+ height: 2rem;
1733+ top: 50%;
1734+ right: 0;
1735+ margin-top: -1.2rem;
1736+ z-index: 0; }
1737+ [data-role="list"] ul li > a:active {
1738+ background: #e6e6e6;
1739+ border-color: #ebebeb; }
1740+ [data-role="list"] ul li p {
1741+ white-space: nowrap;
1742+ overflow: hidden;
1743+ text-overflow: ellipsis;
1744+ border: none;
1745+ display: block;
1746+ color: #787878;
1747+ font-size: 0.9rem;
1748+ padding-left: 1rem;
1749+ padding-top: 0.5rem;
1750+ line-height: 1rem; }
1751+ [data-role="list"] ul li p:only-child, [data-role="list"] ul li p:first-of-type:last-of-type {
1752+ line-height: 2.1rem; }
1753+ [data-role="list"] ul li p + p {
1754+ color: rgba(136, 136, 136, 0.8);
1755+ padding-top: 0.1rem;
1756+ font-size: 0.8rem; }
1757+ [data-role="list"] ul li > label {
1758+ z-index: 9;
1759+ width: 4.5rem;
1760+ height: 2.2rem;
1761+ right: 0.5rem;
1762+ margin-top: -1.1rem;
1763+ position: absolute;
1764+ top: 50%; }
1765+ [data-role="list"] aside {
1766+ float: left;
1767+ margin: -1.2em 0 0 0;
1768+ max-width: 100%;
1769+ vertical-align: bottom;
1770+ position: relative;
1771+ top: 50%;
1772+ z-index: 2; }
1773+ [data-role="list"] aside img {
1774+ border-radius: 6px;
1775+ margin-bottom: 0;
1776+ float: left; }
1777+ [data-role="list"] aside:after {
1778+ background: url(../img/ubuntushape_medium_radius_idle@18.png) no-repeat;
1779+ background-size: 100% 100%;
1780+ content: ' ';
1781+ width: 100%;
1782+ height: 100%;
1783+ position: absolute;
1784+ top: 0;
1785+ left: 0; }
1786+ [data-role="list"] > header + ul li {
1787+ padding-left: 20px; }
1788
1789 /*
1790 * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
1791@@ -1686,45 +1518,36 @@
1792 bottom: -65px;
1793 -webkit-transition: -webkit-transform 0.1s ease-in-out;
1794 transition: transform 0.1s ease-in-out;
1795- display: none;
1796-}
1797-[data-role="footer"].revealed {
1798- -webkit-transform: translate3d(0, -65px, 0);
1799- transform: translate3d(0, -65px, 0);
1800-}
1801-[data-role="footer"] nav {
1802- background: #fdfdfd;
1803- margin-top: 20px;
1804- display: block;
1805- height: 55px;
1806- padding-top: 10px;
1807-}
1808-[data-role="footer"] nav ul {
1809- list-style: none;
1810- text-align: right;
1811-}
1812-[data-role="footer"] nav ul li,
1813-[data-role="footer"] nav ul li a {
1814- color: #7d767b;
1815- font-size: 0.6rem;
1816- text-align: center;
1817- width: 60px;
1818- display: inline-block;
1819- text-decoration: none;
1820-}
1821-[data-role="footer"] nav ul li {
1822- padding-top: 4px;
1823-}
1824-[data-role="footer"] nav ul li img {
1825- width: 16px;
1826- height: 16px;
1827-}
1828-[data-role="footer"] nav ul li span {
1829- display: block;
1830-}
1831-[data-role="footer"] nav ul li:last-child {
1832- float: left;
1833-}
1834+ display: none; }
1835+ [data-role="footer"].revealed {
1836+ -webkit-transform: translate3d(0, -65px, 0);
1837+ transform: translate3d(0, -65px, 0); }
1838+ [data-role="footer"] nav {
1839+ background: #fdfdfd;
1840+ margin-top: 20px;
1841+ display: block;
1842+ height: 55px;
1843+ padding-top: 10px; }
1844+ [data-role="footer"] nav ul {
1845+ list-style: none;
1846+ text-align: right; }
1847+ [data-role="footer"] nav ul li,
1848+ [data-role="footer"] nav ul li a {
1849+ color: #7d767b;
1850+ font-size: 0.6rem;
1851+ text-align: center;
1852+ width: 60px;
1853+ display: inline-block;
1854+ text-decoration: none; }
1855+ [data-role="footer"] nav ul li {
1856+ padding-top: 4px; }
1857+ [data-role="footer"] nav ul li img {
1858+ width: 16px;
1859+ height: 16px; }
1860+ [data-role="footer"] nav ul li span {
1861+ display: block; }
1862+ [data-role="footer"] nav ul li:last-child {
1863+ float: left; }
1864
1865 /*
1866 * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
1867@@ -1757,32 +1580,28 @@
1868 max-width: 100%;
1869 vertical-align: bottom;
1870 position: relative;
1871- z-index: 100;
1872-}
1873-[data-role="shape"]:after {
1874- background: url(../img/ubuntushape.png) no-repeat;
1875- background-size: 100% 100%;
1876- content: ' ';
1877- width: 100%;
1878- height: 100%;
1879- position: absolute;
1880- top: 0;
1881- left: 0;
1882-}
1883-[data-role="shape"] img {
1884- height: 100%;
1885- width: 100%;
1886- max-width: 100% !important;
1887- margin-bottom: 0;
1888- display: inline-block;
1889-}
1890-[data-role="shape"] div {
1891- height: 100%;
1892- width: 100%;
1893- border-radius: 1rem;
1894- margin-bottom: 0;
1895- display: inline-block;
1896-}
1897+ z-index: 100; }
1898+ [data-role="shape"]:after {
1899+ background: url(../img/ubuntushape.png) no-repeat;
1900+ background-size: 100% 100%;
1901+ content: ' ';
1902+ width: 100%;
1903+ height: 100%;
1904+ position: absolute;
1905+ top: 0;
1906+ left: 0; }
1907+ [data-role="shape"] img {
1908+ height: 100%;
1909+ width: 100%;
1910+ max-width: 100% !important;
1911+ margin-bottom: 0;
1912+ display: inline-block; }
1913+ [data-role="shape"] div {
1914+ height: 100%;
1915+ width: 100%;
1916+ border-radius: 1rem;
1917+ margin-bottom: 0;
1918+ display: inline-block; }
1919
1920 /*
1921 * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
1922@@ -1813,32 +1632,28 @@
1923 position: absolute;
1924 right: 1rem;
1925 top: 0;
1926- bottom: 0;
1927-}
1928-[data-role="indexbar"] ol {
1929- -webkit-box-sizing: border-box;
1930- box-sizing: border-box;
1931- padding: 0.3rem 0;
1932- margin: 5.5rem 0;
1933- width: 2rem;
1934- border-radius: 4rem;
1935- opacity: 0.6;
1936- list-style: none;
1937- background: #c2c2c2;
1938-}
1939-[data-role="indexbar"] ol li {
1940- font-size: 1rem;
1941- line-height: 1.4em;
1942- text-align: center;
1943- text-transform: uppercase;
1944-}
1945-[data-role="indexbar"] ol li a {
1946- display: block;
1947- color: #333;
1948- width: 100%;
1949- height: 100%;
1950- text-decoration: none;
1951-}
1952+ bottom: 0; }
1953+ [data-role="indexbar"] ol {
1954+ -webkit-box-sizing: border-box;
1955+ box-sizing: border-box;
1956+ padding: 0.3rem 0;
1957+ margin: 5.5rem 0;
1958+ width: 2rem;
1959+ border-radius: 4rem;
1960+ opacity: 0.6;
1961+ list-style: none;
1962+ background: #c2c2c2; }
1963+ [data-role="indexbar"] ol li {
1964+ font-size: 1rem;
1965+ line-height: 1.4em;
1966+ text-align: center;
1967+ text-transform: uppercase; }
1968+ [data-role="indexbar"] ol li a {
1969+ display: block;
1970+ color: #333;
1971+ width: 100%;
1972+ height: 100%;
1973+ text-decoration: none; }
1974
1975 /*
1976 * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
1977@@ -1862,8 +1677,8 @@
1978 * <http://www.gnu.org/licenses/>.
1979 */
1980 [data-role="option-selector"] {
1981- -webkit-box-shadow: inset 0 2px 2px 0 #d5d5d5;
1982- box-shadow: inset 0 2px 2px 0 #d5d5d5;
1983+ -webkit-box-shadow: inset 0 2px 2px 0 #D5D5D5;
1984+ box-shadow: inset 0 2px 2px 0 #D5D5D5;
1985 width: 100%;
1986 height: auto;
1987 margin: 0 auto;
1988@@ -1875,128 +1690,111 @@
1989 margin-bottom: 15px;
1990 -webkit-border-radius: 10px;
1991 -moz-border-radius: 10px;
1992- border-radius: 10px;
1993-}
1994-[data-role="option-selector"] li {
1995- text-decoration: none;
1996- color: #787878;
1997- display: block;
1998- height: 3rem;
1999- position: relative;
2000- line-height: 3rem;
2001- padding-left: 1rem;
2002- padding-right: 1.5rem;
2003- border: none;
2004- border-top: 1px solid #C7C7C7;
2005- font-size: 0.9rem;
2006- white-space: nowrap;
2007- overflow: hidden;
2008- text-overflow: ellipsis;
2009- cursor: pointer;
2010-}
2011-[data-role="option-selector"] li.active:after {
2012- background: transparent url(../img/tick@30.png) no-repeat center center;
2013- background-size: 15px 15px;
2014- display: block;
2015- position: absolute;
2016- width: 2rem;
2017- height: 3rem;
2018- right: 0.5rem;
2019- content: "";
2020- top: 0;
2021-}
2022-[data-role="option-selector"] li.closed:after {
2023- background: transparent url(../img/chevron_down@30.png) no-repeat center center;
2024- background-size: 15px 15px;
2025- display: block;
2026- position: absolute;
2027- width: 2rem;
2028- height: 3rem;
2029- right: 0.5rem;
2030- content: "";
2031- top: 0;
2032-}
2033-[data-role="option-selector"] li aside {
2034- float: left;
2035- margin: -1.2em 0 0 0;
2036- max-width: 100%;
2037- vertical-align: bottom;
2038- position: relative;
2039- top: 50%;
2040- z-index: 2;
2041-}
2042-[data-role="option-selector"] li aside img {
2043- border-radius: 6px;
2044- margin-bottom: 0;
2045- float: left;
2046-}
2047-[data-role="option-selector"] li aside:after {
2048- background: url(../img/ubuntushape_medium_radius_idle@18.png) no-repeat;
2049- background-size: 100% 100%;
2050- content: ' ';
2051- width: 100%;
2052- height: 100%;
2053- position: absolute;
2054- top: 0;
2055- left: 0;
2056-}
2057-[data-role="option-selector"] li aside + p {
2058- padding-left: 1rem;
2059-}
2060-[data-role="option-selector"] li p {
2061- white-space: nowrap;
2062- overflow: hidden;
2063- text-overflow: ellipsis;
2064- border: none;
2065- display: block;
2066- color: #787878;
2067- font-size: 0.9rem;
2068- padding-top: 0.5rem;
2069- line-height: 1rem;
2070-}
2071-[data-role="option-selector"] li p:only-child, [data-role="option-selector"] li p:first-of-type:last-of-type {
2072- line-height: 2rem;
2073-}
2074-[data-role="option-selector"] li p + p {
2075- padding-top: 0.2rem;
2076- font-size: 0.7rem;
2077-}
2078-[data-role="option-selector"] li:first-child {
2079- border-top: 0 !important;
2080-}
2081+ border-radius: 10px; }
2082+ [data-role="option-selector"] li {
2083+ text-decoration: none;
2084+ color: #787878;
2085+ display: block;
2086+ height: 3rem;
2087+ position: relative;
2088+ line-height: 3rem;
2089+ padding-left: 1rem;
2090+ padding-right: 1.5rem;
2091+ border: none;
2092+ border-top: 1px solid #C7C7C7;
2093+ font-size: 0.9rem;
2094+ white-space: nowrap;
2095+ overflow: hidden;
2096+ text-overflow: ellipsis;
2097+ cursor: pointer; }
2098+ [data-role="option-selector"] li.active:after {
2099+ background: transparent url(../img/tick@30.png) no-repeat center center;
2100+ background-size: 15px 15px;
2101+ display: block;
2102+ position: absolute;
2103+ width: 2rem;
2104+ height: 3rem;
2105+ right: 0.5rem;
2106+ content: "";
2107+ top: 0; }
2108+ [data-role="option-selector"] li.closed:after {
2109+ background: transparent url(../img/chevron_down@30.png) no-repeat center center;
2110+ background-size: 15px 15px;
2111+ display: block;
2112+ position: absolute;
2113+ width: 2rem;
2114+ height: 3rem;
2115+ right: 0.5rem;
2116+ content: "";
2117+ top: 0; }
2118+ [data-role="option-selector"] li aside {
2119+ float: left;
2120+ margin: -1.2em 0 0 0;
2121+ max-width: 100%;
2122+ vertical-align: bottom;
2123+ position: relative;
2124+ top: 50%;
2125+ z-index: 2; }
2126+ [data-role="option-selector"] li aside img {
2127+ border-radius: 6px;
2128+ margin-bottom: 0;
2129+ float: left; }
2130+ [data-role="option-selector"] li aside:after {
2131+ background: url(../img/ubuntushape_medium_radius_idle@18.png) no-repeat;
2132+ background-size: 100% 100%;
2133+ content: ' ';
2134+ width: 100%;
2135+ height: 100%;
2136+ position: absolute;
2137+ top: 0;
2138+ left: 0; }
2139+ [data-role="option-selector"] li aside + p {
2140+ padding-left: 1rem; }
2141+ [data-role="option-selector"] li p {
2142+ white-space: nowrap;
2143+ overflow: hidden;
2144+ text-overflow: ellipsis;
2145+ border: none;
2146+ display: block;
2147+ color: #787878;
2148+ font-size: 0.9rem;
2149+ padding-top: 0.5rem;
2150+ line-height: 1rem; }
2151+ [data-role="option-selector"] li p:only-child, [data-role="option-selector"] li p:first-of-type:last-of-type {
2152+ line-height: 2rem; }
2153+ [data-role="option-selector"] li p + p {
2154+ padding-top: 0.2rem;
2155+ font-size: 0.7rem; }
2156+ [data-role="option-selector"] li:first-child {
2157+ border-top: 0 !important; }
2158
2159 * {
2160- -webkit-tap-highlight-color: transparent;
2161-}
2162+ -webkit-tap-highlight-color: transparent; }
2163
2164 html, body,
2165 [data-role="mainview"],
2166 [data-role="content"] {
2167 position: relative;
2168 width: 100%;
2169- min-height: 100%;
2170-}
2171+ min-height: 100%; }
2172
2173 body {
2174 background: #ededed;
2175 font-family: "Ubuntu";
2176 font-weight: normal;
2177- color: #787878;
2178-}
2179+ color: #787878; }
2180
2181 [data-role="content"] {
2182 background: #ededed;
2183 border-top: 1px solid #f0f0f0;
2184 font-size: 1rem "Ubuntu";
2185 min-height: calc(100% - 75px);
2186- color: #787878;
2187-}
2188+ color: #787878; }
2189
2190 [data-role="content"] p {
2191 font: 0.9rem "Ubuntu";
2192 color: #787878;
2193- line-height: 1.33;
2194-}
2195+ line-height: 1.33; }
2196
2197 [data-role="content"] h1,
2198 [data-role="content"] h2,
2199@@ -2004,60 +1802,51 @@
2200 color: #747278;
2201 font: 1.3rem "Ubuntu";
2202 font-weight: 300;
2203- line-height: 1.5;
2204-}
2205+ line-height: 1.5; }
2206
2207 [data-role="content"] h2 {
2208 font-size: 1.1rem;
2209- line-height: 1.4;
2210-}
2211+ line-height: 1.4; }
2212
2213 [data-role="content"] h3 {
2214 font-size: 0.9rem;
2215- line-height: 1.3;
2216-}
2217+ line-height: 1.3; }
2218
2219 [data-role="content"] img {
2220 margin: 0 auto;
2221- max-width: 98%;
2222-}
2223+ max-width: 98%; }
2224
2225 .inset {
2226 margin-bottom: 10px;
2227 margin-top: 10px;
2228 clear: both;
2229- overflow: hidden;
2230-}
2231+ overflow: hidden; }
2232
2233 /**
2234 To be factored out
2235 */
2236 .xlarge-font {
2237 font-size: 33px;
2238- line-height: 1.3;
2239-}
2240+ line-height: 1.3; }
2241
2242 .large-font {
2243 font-size: 20px;
2244- line-height: 1.3;
2245-}
2246+ line-height: 1.3; }
2247
2248 .medium-font {
2249 font-size: 14px;
2250- line-height: 1.3;
2251-}
2252+ line-height: 1.3; }
2253
2254 .small-font {
2255 font-size: 12px;
2256- line-height: 1.3;
2257-}
2258+ line-height: 1.3; }
2259
2260 .xsmall-font {
2261 font-size: 10px;
2262- line-height: 1.3;
2263-}
2264+ line-height: 1.3; }
2265
2266 .xxsmall-font {
2267 font-size: 8px;
2268- line-height: 1.3;
2269-}
2270+ line-height: 1.3; }
2271+
2272+/*# sourceMappingURL=appTemplate.css.map */
2273
2274=== modified file '0.1/ambiance/css/sass/buttons.scss'
2275--- 0.1/ambiance/css/sass/buttons.scss 2014-02-24 22:24:41 +0000
2276+++ 0.1/ambiance/css/sass/buttons.scss 2015-12-17 23:19:27 +0000
2277@@ -25,24 +25,27 @@
2278 * ---------------------------------- */
2279
2280 [data-role="button"] {
2281+ @include box_shadow (0 2px 2px rgba(100, 100, 100, 0.4) inset);
2282 @include box_sizing (border-box);
2283 display: inline-block;
2284- width: 100%;
2285- height: 42px;
2286- vertical-align: middle;
2287- text-overflow: ellipsis;
2288- white-space: nowrap;
2289- overflow: hidden;
2290+ min-width: 92px;
2291+ height: 35px;
2292+ line-height: 27px;
2293+ padding: 4px 10px;
2294 background: $ubuntu_orange;
2295- border: 2px solid $ubuntu_orange;
2296- border-radius: 6px;
2297+ border: none;
2298+ border-radius: 9px/7px;
2299 color: $white;
2300 font-family: $font-family;
2301 font-size: 1rem;
2302- padding: 9px 25px;
2303+ overflow: hidden;
2304+ position: relative;
2305 text-align: center;
2306 text-decoration: none;
2307- position: relative;
2308+ text-overflow: ellipsis;
2309+ @include transition (box-shadow 0.175s);
2310+ vertical-align: middle;
2311+ white-space: nowrap;
2312
2313 &.positive {
2314 background: $green;
2315@@ -66,4 +69,34 @@
2316 color: $white;
2317 border-color: $light_grey;
2318 }
2319+
2320+ &.disabled {
2321+ color: rgba(255, 255, 255, 0.5);
2322+ }
2323+
2324+ &:not(.disabled):active {
2325+ @include box_shadow (0 3px 3px rgba(0, 0, 0, 0.4) inset, 0 0 200px rgba(0, 0, 0, 0.15) inset);
2326+ }
2327+
2328+ & + [data-role="button"] {
2329+ margin-left: 15px;
2330+ }
2331+
2332+ & [data-role="icon"] {
2333+ display: inline-block;
2334+ height: 100%;
2335+ vertical-align: top;
2336+ @include filter (brightness(2));
2337+ }
2338+ &.icon-left [data-role="icon"] {
2339+ float: left;
2340+ margin-right: 5px;
2341+ }
2342+ &.icon-right [data-role="icon"] {
2343+ float: right;
2344+ margin-left: 5px;
2345+ }
2346+ &.disabled [data-role="icon"] {
2347+ opacity: 0.5;
2348+ }
2349 }
2350\ No newline at end of file
2351
2352=== modified file '0.1/ambiance/css/sass/constants.scss'
2353--- 0.1/ambiance/css/sass/constants.scss 2015-01-15 22:02:35 +0000
2354+++ 0.1/ambiance/css/sass/constants.scss 2015-12-17 23:19:27 +0000
2355@@ -27,7 +27,7 @@
2356 $text_color: #787878;
2357 $cream: #f3f3e7;
2358 $warm_grey: #888888;
2359-$light_grey: #929292;
2360+$light_grey: #ABA59F;
2361 $dark_grey: #5d5d5d;
2362 $green: #38b44a;
2363 $blue: #2ab7ec;
2364
2365=== modified file '0.1/ambiance/css/sass/icons.scss'
2366--- 0.1/ambiance/css/sass/icons.scss 2014-08-30 20:10:18 +0000
2367+++ 0.1/ambiance/css/sass/icons.scss 2015-12-17 23:19:27 +0000
2368@@ -31,7 +31,7 @@
2369 vertical-align: middle;
2370
2371 &[data-icon="call"] {
2372- background: url(icon(icon-call)) no-repeat scroll center center transparent;
2373+ background: url(icon(call-start)) no-repeat scroll center center transparent;
2374 background-size: 26px;
2375 }
2376
2377
2378=== modified file '0.1/ambiance/css/sass/mixins.scss'
2379--- 0.1/ambiance/css/sass/mixins.scss 2014-08-14 20:57:48 +0000
2380+++ 0.1/ambiance/css/sass/mixins.scss 2015-12-17 23:19:27 +0000
2381@@ -21,11 +21,23 @@
2382 */
2383
2384 @mixin box_sizing($type: border-box) {
2385- -webkit-box-sizing: $type;
2386- box-sizing: $type;
2387-}
2388-
2389-@mixin box_shadow($type: inset 0 1px 1px rgba(0, 0, 0, 0.1)) {
2390- -webkit-box-shadow: $type;
2391- box-shadow: $type;
2392+ -webkit-box-sizing: $type;
2393+ box-sizing: $type;
2394+}
2395+
2396+@mixin box_shadow($type...) {
2397+ -webkit-box-shadow: $type;
2398+ box-shadow: $type;
2399+}
2400+
2401+@mixin transition($transition...) {
2402+ -webkit-transition: $transition;
2403+ -moz-transition: $transition;
2404+ -o-transition: $transition;
2405+ transition: $transition;
2406+}
2407+
2408+@mixin filter($filter) {
2409+ -webkit-filter: $filter;
2410+ filter: $filter;
2411 }
2412\ No newline at end of file
2413
2414=== modified file 'examples/html5-theme/widgets/Buttons.html'
2415--- examples/html5-theme/widgets/Buttons.html 2014-02-24 22:24:41 +0000
2416+++ examples/html5-theme/widgets/Buttons.html 2015-12-17 23:19:27 +0000
2417@@ -33,74 +33,32 @@
2418 <body>
2419 <div data-role="mainview">
2420 <div class="content">
2421- <header data-role="header">
2422- <ul data-role="tabs">
2423- <li data-role="tabitem" data-page="main" class="active">Buttons</li>
2424- </ul>
2425- </header>
2426-
2427- <div class="inset">
2428- <div style="width: 200px; float:left; margin-right: 20px;">
2429- <button data-role="button">Primary action</button>
2430- </div>
2431- </div>
2432-
2433- <div class="inset">
2434- <div style="width: 200px; float:left; margin-right: 20px;">
2435- <button data-role="button" class="secondary">Secondary</button>
2436- </div>
2437- <div style="width: 200px; float:left; margin-right: 20px;">
2438- <button data-role="button">Primary action</button>
2439- </div>
2440- </div>
2441-
2442- <div class="inset">
2443- <div style="width: 200px; float:left; margin-right: 20px;">
2444- <button data-role="button" class="negative">Negative</button>
2445- </div>
2446- <div style="width: 200px; float:left; margin-right: 20px;">
2447- <button data-role="button">Warning</button>
2448- </div>
2449- </div>
2450-
2451- <div class="inset">
2452- <div style="width: 200px; float:left; margin-right: 20px;">
2453- <button data-role="button" class="positive">Primary action</button>
2454- </div>
2455- </div>
2456-
2457- <div class="inset">
2458- <div style="width: 200px; float:left; margin-right: 20px;">
2459- <button data-role="button" class="secondary positive">Secondary</button>
2460- </div>
2461- <div style="width: 200px; float:left; margin-right: 20px;">
2462- <button data-role="button" class="positive">Primary action</button>
2463- </div>
2464- </div>
2465-
2466- <div class="inset">
2467- <div style="width: 200px; float:left; margin-right: 20px;">
2468- <button data-role="button" class="negative positive">Negative</button>
2469- </div>
2470- <div style="width: 200px; float:left; margin-right: 20px;">
2471- <button data-role="button" class="positive">Confirmation</button>
2472- </div>
2473- </div>
2474-
2475-
2476- <div class="inset">
2477- <div style="width: 200px; float:left; margin-right: 20px;">
2478- <button data-role="button" class="information">Primary action</button>
2479- </div>
2480- </div>
2481-
2482- <div class="inset">
2483- <div style="width: 200px; float:left; margin-right: 20px;">
2484- <button data-role="button" class="secondary information">Secondary</button>
2485- </div>
2486- <div style="width: 200px; float:left; margin-right: 20px;">
2487- <button data-role="button" class="information">Primary action</button>
2488- </div>
2489+ <div class="large-font" style="padding-bottom: 28px">Button</div>
2490+
2491+ <div style="padding-bottom: 28px">
2492+ <span class="medium-font" style="display: inline-block; width: 100px">Standard</span>
2493+ <button data-role="button">Call</button>
2494+ </div>
2495+
2496+ <div style="padding-bottom: 28px">
2497+ <span class="medium-font" style="display: inline-block; width: 100px">Color</span>
2498+ <button data-role="button" class="negative">Call</button>
2499+ </div>
2500+
2501+ <div style="padding-bottom: 28px">
2502+ <span class="medium-font" style="display: inline-block; width: 100px">Icon</span>
2503+ <button data-role="button"><span data-role="icon" data-icon="call"></span></button>
2504+ </div>
2505+
2506+ <div style="padding-bottom: 28px">
2507+ <span class="medium-font" style="display: inline-block; width: 100px">Icon+Text</span>
2508+ <button data-role="button" class="icon-right">Call<span data-role="icon" data-icon="call"></span></button>
2509+ <button data-role="button" class="icon-left"><span data-role="icon" data-icon="call"></span>Call</button>
2510+ </div>
2511+
2512+ <div style="padding-bottom: 28px">
2513+ <span class="medium-font" style="display: inline-block; width: 100px">Disabled</span>
2514+ <button data-role="button" class="disabled">Call</button>
2515 </div>
2516 </div>
2517

Subscribers

People subscribed via source and target branches