Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: css/io-toggle.scss

Issue 29730644: Issue 6514 - IOToggle Custom Element (Closed)
Patch Set: applied changes Created April 27, 2018, 1:56 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « .gitignore ('k') | js/io-element.js » ('j') | skin/io-toggle.css » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 /*
2 * This file is part of Adblock Plus <https://adblockplus.org/>,
3 * Copyright (C) 2006-present eyeo GmbH
4 *
5 * Adblock Plus is free software: you can redistribute it and/or modify
6 * it under the terms of the GNU General Public License version 3 as
7 * published by the Free Software Foundation.
8 *
9 * Adblock Plus is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 * GNU General Public License for more details.
13 *
14 * You should have received a copy of the GNU General Public License
15 * along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.
16 */
17
18 io-toggle
19 {
20 --width: 30px;
21 --height: 8px;
22 --translateY: -4px;
23 --translateX: 14px;
24 display: inline-block;
25 width: var(--width);
26 height: var(--height);
27 border-radius: 4px;
28 background-color: #9b9b9b;
saroyanm 2018/05/02 10:59:16 There were some complex discussions, regarding SAS
29 transition: background .2s ease-out;
30 will-change: background;
31 cursor: pointer;
32 }
33
34 io-toggle[checked]
35 {
36 background-color: #92d3ea;
37 }
38
39 io-toggle[disabled]
40 {
41 opacity: 0.5;
42 cursor: default;
43 }
44
45 io-toggle button
46 {
47 width: calc(var(--height) * 2);
48 height: calc(var(--height) * 2);
49 padding: 0;
50 border: 2px solid #e1e0e1;
51 border-radius: var(--height);
52 transition: border .2s ease-out, box-shadow .2s ease-out,
53 transform .2s ease-out, width .2s ease-out;
54 will-change: border, box-shadow, transform, width;
55 transform: translateY(var(--translateY));
56 outline: none;
57 cursor: pointer;
58 }
59
60 io-toggle button[aria-checked="false"]
61 {
62 background-color: #f1f1f1;
63 box-shadow: 0 1px 2px 0 #e5d1d1;
64 }
65
66 io-toggle button[aria-checked="false"]:hover
67 {
68 box-shadow: 0 2px 4px 0 #d3b0b0;
69 }
70
71 io-toggle button[aria-checked="true"]
72 {
73 background-color: #059cd0;
74 border: 2px solid #059cd0;
75 box-shadow: 0 1px 2px 0 #a6cede;
76 transform: translateY(var(--translateY)) translateX(var(--translateX));
77 }
78
79 io-toggle button[aria-checked="true"]:hover
80 {
81 box-shadow: 0 2px 4px 0 #a6cede;
82 }
83
84 io-toggle button:focus,
85 io-toggle button[aria-checked="true"]:focus
86 {
87 border: 2px solid #87bffe;
88 }
89
90 body[dir="rtl"] io-toggle button[aria-checked="true"]
91 {
92 transform: translateY(var(--translateY)) translateX(calc(var(--translateX) * - 1));
93 }
OLDNEW
« no previous file with comments | « .gitignore ('k') | js/io-element.js » ('j') | skin/io-toggle.css » ('J')

Powered by Google App Engine
This is Rietveld