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

Side by Side Diff: third_party/polymer/v0_8/components/paper-checkbox/paper-checkbox.css

Issue 1082403004: Import Polymer 0.8 and several key elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Also remove polymer/explainer Created 5 years, 7 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
(Empty)
1 /*
2 Copyright (c) 2015 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
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
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
8 */
9
10 :host {
11 display: inline-block;
12 white-space: nowrap;
13 }
14
15 .hidden {
16 display: none;
17 }
18
19 #checkboxContainer {
20 display: inline-block;
21 position: relative;
22 width: 18px;
23 height: 18px;
24 cursor: pointer;
25 -webkit-transform: translateZ(0);
26 transform: translateZ(0);
27 vertical-align: middle;
28 }
29
30 :host #ink {
31 position: absolute;
32 top: -15px;
33 left: -15px;
34 width: 48px;
35 height: 48px;
36 color: var(--paper-checkbox-unchecked-ink-color);
37 }
38
39 :host #ink[checked] {
40 color: var(--paper-checkbox-checked-ink-color);
41 }
42
43 :host #checkbox {
44 position: relative;
45 box-sizing: border-box;
46 height: 100%;
47 border: solid 2px;
48 border-color: var(--paper-checkbox-unchecked-color);
49 border-radius: 2px;
50 pointer-events: none;
51 -webkit-transition: background-color 140ms, border-color 140ms;
52 transition: background-color 140ms, border-color 140ms;
53 }
54
55 /* checkbox checked animations */
56 #checkbox.checked #checkmark {
57 -webkit-animation: checkmark-expand 140ms ease-out forwards;
58 animation: checkmark-expand 140ms ease-out forwards;
59 }
60
61 @-webkit-keyframes checkmark-expand {
62 0% {
63 top: 9px;
64 left: 6px;
65 width: 0px;
66 height: 0px;
67 }
68 100% {
69 top: -1px;
70 left: 4px;
71 width: 5px;
72 height: 10px;
73 }
74 }
75
76 @keyframes checkmark-expand {
77 0% {
78 top: 9px;
79 left: 6px;
80 width: 0px;
81 height: 0px;
82 }
83 100% {
84 top: -1px;
85 left: 4px;
86 width: 5px;
87 height: 10px;
88 }
89 }
90
91 :host #checkbox.checked {
92 background-color: var(--paper-checkbox-checked-color);
93 border-color: var(--paper-checkbox-checked-color);
94 }
95
96 :host #checkmark {
97 -webkit-transform: rotate(45deg);
98 transform: rotate(45deg);
99 position: absolute;
100 top: -1px;
101 left: 4px;
102 width: 5px;
103 height: 10px;
104 border-style: solid;
105 border-top: none;
106 border-left: none;
107 border-right-width: 2px;
108 border-bottom-width: 2px;
109 border-color: white;
110 }
111
112 /* label */
113 #checkboxLabel {
114 position: relative;
115 display: inline-block;
116 vertical-align: middle;
117 padding-left: 8px;
118 white-space: normal;
119 pointer-events: none;
120 }
121
122 #checkboxLabel[hidden] {
123 display: none;
124 }
125
126 /* disabled state */
127 :host([disabled]) {
128 pointer-events: none;
129 }
130
131 :host([disabled]) #checkbox {
132 opacity: 0.33;
133 border-color: var(--paper-checkbox-unchecked-color);
134 }
135
136 :host([disabled][checked]) #checkbox {
137 background-color: var(--paper-checkbox-unchecked-color);
138 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698