Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(869)

Side by Side Diff: runtime/bin/vmservice/observatory/lib/src/elements/sliding_checkbox.html

Issue 810623005: Build Observatory with runtime (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: Created 5 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
(Empty)
1 <link rel="import" href="../../../../packages/polymer/polymer.html">
2
3 <polymer-element name="sliding-checkbox">
4 <template>
5 <style>
6 .switch {
7 position: relative;
8 width: 121px;
9 -webkit-user-select: none;
10 -moz-user-select: none;
11 -ms-user-select: none;
12 }
13 .hide {
14 display: none;
15 }
16 .label {
17 display: block;
18 overflow: hidden;
19 cursor: pointer;
20 border: 2px solid #999999;
21 border-radius: 15px;
22 }
23 .content {
24 width: 200%;
25 margin-left: -100%;
26 -moz-transition: margin 0.3s ease-in 0s;
27 -webkit-transition: margin 0.3s ease-in 0s;
28 -o-transition: margin 0.3s ease-in 0s;
29 transition: margin 0.3s ease-in 0s;
30 }
31 .content:before, .content:after {
32 float: left;
33 width: 50%;
34 height: 30px;
35 padding: 0;
36 line-height: 30px;
37 color: white;
38 font: 400 14px 'Montserrat', sans-serif;
39 -moz-box-sizing: border-box;
40 -webkit-box-sizing: border-box;
41 box-sizing: border-box;
42 }
43 .content:before {
44 content: {{ checkedText }};
45 padding-left: 10px;
46 background-color: #0489C3;
47 }
48 .content:after {
49 content: {{ uncheckedText }};
50 padding-right: 10px;
51 background-color: #EEEEEE;
52 color: #999999;
53 text-align: right;
54 }
55 .dot {
56 width: 14px;
57 margin: 8px;
58 background: #FFFFFF;
59 border: 2px solid #999999;
60 border-radius: 15px;
61 position: absolute;
62 top: 0;
63 bottom: 0;
64 right: 87px;
65 -moz-transition: all 0.3s ease-in 0s;
66 -webkit-transition: all 0.3s ease-in 0s;
67 -o-transition: all 0.3s ease-in 0s;
68 transition: all 0.3s ease-in 0s;
69 }
70 :checked + .label .content {
71 margin-left: 0;
72 }
73 :checked + .label .dot {
74 right: 0px;
75 }
76 </style>
77 <div class="switch">
78 <input type="checkbox"
79 class="hide"
80 id="slide-switch"
81 on-change="{{ change }}">
82 <label class="label" for="slide-switch">
83 <div class="content"></div>
84 <div class="dot"></div>
85 </label>
86 </div>
87 </template>
88 </polymer-element>
89
90 <script type="application/dart" src="sliding_checkbox.dart"></script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698