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

Side by Side Diff: third_party/polymer/components/paper-toggle-button/paper-toggle-button.css

Issue 899383002: Update paper-toggle-button to 0.5.4 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 5 years, 10 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
OLDNEW
1 /* 1 /*
2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
6 Code distributed by Google as part of the polymer project is also 6 Code distributed by Google as part of the polymer project is also
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
8 */ 8 */
9 9
10 :host { 10 :host {
11 display: inline-block; 11 display: inline-block;
12 } 12 }
13 13
14 :host(:focus) { 14 :host(:focus) {
15 outline: none; 15 outline: none;
16 } 16 }
17 17
18 /* Class selectors can be overridden by users. */
19
20 .toggle-bar {
21 background-color: #000000;
22 }
23
24 .toggle-button {
25 background-color: #f1f1f1;
26 }
27
28 [checked] .toggle {
29 background-color: #0f9d58;
30 }
31
32 .toggle-ink {
33 color: #bbb;
34 }
35
36 [checked] .toggle-ink {
37 color: #0f9d58;
38 }
39
40 /* ID selectors should not be overriden by users. */
41
18 #toggleContainer { 42 #toggleContainer {
19 position: relative; 43 position: relative;
20 width: 64px; 44 width: 36px;
21 height: 16px; 45 height: 14px;
46 }
47
48 #toggleContainer[disabled] {
49 opacity: 0.3;
50 pointer-events: none;
22 } 51 }
23 52
24 #toggleBar { 53 #toggleBar {
25 position: absolute; 54 position: absolute;
26 top: 8px; 55 height: 100%;
27 left: 16px; 56 width: 100%;
28 height: 1px; 57 border-radius: 8px;
29 width: 32px;
30 background-color: #5a5a5a;
31 pointer-events: none; 58 pointer-events: none;
59 opacity: 0.26;
60 transition: background-color linear .08s;
32 } 61 }
33 62
34 #toggleBar[checked] { 63 [checked] #toggleBar {
35 background-color: #0f9d58; 64 opacity: 0.5;
36 } 65 }
37 66
38 #toggleContainer[checked] #checkedBar { 67 #toggleButton {
39 width: 100%; 68 position: absolute;
69 top: -3px;
70 height: 20px;
71 width: 20px;
72 border-radius: 50%;
73 box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
74 transition: -webkit-transform linear .08s, background-color linear .08s;
75 transition: transform linear .08s, background-color linear .08s;
40 } 76 }
41 77
42 #toggleRadio { 78 #toggleButton.dragging {
43 position: absolute;
44 left: 0;
45 padding: 8px 48px 8px 0;
46 margin: -8px -48px -8px 0;
47 transition: -webkit-transform linear .08s;
48 transition: transform linear .08s;
49 }
50
51 #toggleRadio[checked] {
52 -webkit-transform: translate(48px, 0);
53 transform: translate(48px, 0);
54 padding: 8px 0 8px 48px;
55 margin: -8px 0 -8px -48px;
56 }
57
58 #toggleRadio.dragging {
59 -webkit-transition: none; 79 -webkit-transition: none;
60 transition: none; 80 transition: none;
61 } 81 }
62 82
63 /* disabled state */ 83 [checked] #toggleButton {
64 #toggleContainer[disabled] { 84 -webkit-transform: translate(16px, 0);
65 opacity: 0.3; 85 transform: translate(16px, 0);
86 }
87
88 #ink {
89 position: absolute;
90 top: -14px;
91 left: -14px;
92 width: 48px;
93 height: 48px;
66 pointer-events: none; 94 pointer-events: none;
67 } 95 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698