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

Unified Diff: third_party/polymer/components-chromium/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 side-by-side diff with in-line comments
Download patch
Index: third_party/polymer/components-chromium/paper-toggle-button/paper-toggle-button.css
diff --git a/third_party/polymer/components-chromium/paper-toggle-button/paper-toggle-button.css b/third_party/polymer/components-chromium/paper-toggle-button/paper-toggle-button.css
index 67e89305733aad4a8c22a20810dcad04a9a21702..5ffe0451161e721a0a968310a194f8a8364953c6 100644
--- a/third_party/polymer/components-chromium/paper-toggle-button/paper-toggle-button.css
+++ b/third_party/polymer/components-chromium/paper-toggle-button/paper-toggle-button.css
@@ -15,53 +15,81 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
outline: none;
}
-#toggleContainer {
- position: relative;
- width: 64px;
- height: 16px;
+/* Class selectors can be overridden by users. */
+
+.toggle-bar {
+ background-color: #000000;
}
-#toggleBar {
- position: absolute;
- top: 8px;
- left: 16px;
- height: 1px;
- width: 32px;
- background-color: #5a5a5a;
- pointer-events: none;
+.toggle-button {
+ background-color: #f1f1f1;
}
-#toggleBar[checked] {
+[checked] .toggle {
background-color: #0f9d58;
}
-#toggleContainer[checked] #checkedBar {
- width: 100%;
+.toggle-ink {
+ color: #bbb;
+}
+
+[checked] .toggle-ink {
+ color: #0f9d58;
+}
+
+/* ID selectors should not be overriden by users. */
+
+#toggleContainer {
+ position: relative;
+ width: 36px;
+ height: 14px;
+}
+
+#toggleContainer[disabled] {
+ opacity: 0.3;
+ pointer-events: none;
}
-#toggleRadio {
+#toggleBar {
position: absolute;
- left: 0;
- padding: 8px 48px 8px 0;
- margin: -8px -48px -8px 0;
- transition: -webkit-transform linear .08s;
- transition: transform linear .08s;
+ height: 100%;
+ width: 100%;
+ border-radius: 8px;
+ pointer-events: none;
+ opacity: 0.26;
+ transition: background-color linear .08s;
}
-#toggleRadio[checked] {
- -webkit-transform: translate(48px, 0);
- transform: translate(48px, 0);
- padding: 8px 0 8px 48px;
- margin: -8px 0 -8px -48px;
+[checked] #toggleBar {
+ opacity: 0.5;
}
-#toggleRadio.dragging {
+#toggleButton {
+ position: absolute;
+ top: -3px;
+ height: 20px;
+ width: 20px;
+ border-radius: 50%;
+ box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
+ transition: -webkit-transform linear .08s, background-color linear .08s;
+ transition: transform linear .08s, background-color linear .08s;
+}
+
+#toggleButton.dragging {
-webkit-transition: none;
transition: none;
}
-/* disabled state */
-#toggleContainer[disabled] {
- opacity: 0.3;
+[checked] #toggleButton {
+ -webkit-transform: translate(16px, 0);
+ transform: translate(16px, 0);
+}
+
+#ink {
+ position: absolute;
+ top: -14px;
+ left: -14px;
+ width: 48px;
+ height: 48px;
pointer-events: none;
}

Powered by Google App Engine
This is Rietveld 408576698