Issue 6514 - IOToggle Custom Element

css/io-toggle.scss

+/*
+ * This file is part of Adblock Plus <https://adblockplus.org/>,
+ * Copyright (C) 2006-present eyeo GmbH
+ *
+ * Adblock Plus is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * Adblock Plus is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Adblock Plus.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+io-toggle
+{
+  --width: 30px;
+  --height: 8px;
+  --translateY: -4px;
+  --translateX: 14px;
+  display: inline-block;
+  width: var(--width);
+  height: var(--height);
+  border-radius: 4px;
+  background-color: #9b9b9b;

[saroyanm, 2018/05/02 10:59:16]

There were some complex discussions, regarding SASS.. 
I don't feel like commenting under previous code as I keep missing old
discussions.
I didn't understand the arguments in the previous discussion completely, because
they are arguable and they "depends".

So what about moving Color names into separate file, called _variables.SCSS ?
I don't know if here we have common sizes, but I think colors are good start.

That way we will avoid having color discussions in the reviews in future and
hopefully eventually sizes as well.
If there is other native way to do that which doesn't require additional
request, it's again fine with me again, but in that case we might want to
abandon SCSS completely I assume, as I currently don't see any other SCSS
use-case which will make all developers happy, maybe only for importing website
defaults, which again make things complex.

FWIW: I do like using preprocessors, I would even be in favor of using some of
it's "magic".
That will make this CSS looks more readable:
But that might be personal preference:

@import "_variables.less";

io-toggle
{
  &[checked]
  {
  background-color: @primary;
  ...
  }
  &[disabled]
  {
  ...
  }
}

# tl;dr 

I'm fine using anything that will provide way to share variables across
component, pages and ideally modules(website).
If we have arguments against it, than I don't know why we have introduced SASS
in first place, seems like we don't need it?

+  transition: background .2s ease-out;
+  will-change: background;
+  cursor: pointer;
+}
+
+io-toggle[checked]
+{
+  background-color: #92d3ea;
+}
+
+io-toggle[disabled]
+{
+  opacity: 0.5;
+  cursor: default;
+}
+
+io-toggle button
+{
+  width: calc(var(--height) * 2);
+  height: calc(var(--height) * 2);
+  padding: 0;
+  border: 2px solid #e1e0e1;
+  border-radius: var(--height);
+  transition: border .2s ease-out, box-shadow .2s ease-out,
+              transform .2s ease-out, width .2s ease-out;
+  will-change: border, box-shadow, transform, width;
+  transform: translateY(var(--translateY));
+  outline: none;
+  cursor: pointer;
+}
+
+io-toggle button[aria-checked="false"]
+{
+  background-color: #f1f1f1;
+  box-shadow: 0 1px 2px 0 #e5d1d1;
+}
+
+io-toggle button[aria-checked="false"]:hover
+{
+  box-shadow: 0 2px 4px 0 #d3b0b0;
+}
+
+io-toggle button[aria-checked="true"]
+{
+  background-color: #059cd0;
+  border: 2px solid #059cd0;
+  box-shadow: 0 1px 2px 0 #a6cede;
+  transform: translateY(var(--translateY)) translateX(var(--translateX));
+}
+
+io-toggle button[aria-checked="true"]:hover
+{
+  box-shadow: 0 2px 4px 0 #a6cede;
+}
+
+io-toggle button:focus,
+io-toggle button[aria-checked="true"]:focus
+{
+  border: 2px solid #87bffe;
+}
+
+body[dir="rtl"] io-toggle button[aria-checked="true"]
+{
+  transform: translateY(var(--translateY)) translateX(calc(var(--translateX) * -1));
+}