1 files changed, 127 insertions, 0 deletions
diff --git a/shared/style/switches.css b/shared/style/switches.css
new file mode 100644
index 0000000..a000293
--- /dev/null
+++ b/shared/style/switches.css
@@ -0,0 +1,127 @@
+/* ----------------------------------
+ * CHECKBOXES / RADIOS
+ * ---------------------------------- */
+
+label:not([for])  {
+  display: inline-block;
+  vertical-align: middle;
+  width: 5rem;
+  height: 5rem;
+  position: relative;
+  background: none;
+}
+
+label:not([for]) input {
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+label:not([for]) input + span {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin: -1.1rem 0 0 -1.1rem;
+  width: 2.2rem;
+  height: 2.2rem;
+  pointer-events: none;
+}
+
+label:not([for]) input[type="checkbox"] + span {
+  background: url(switches/images/check/default.png) no-repeat center top;
+}
+
+label:not([for]) input[type="radio"] + span {
+  background: url(switches/images/radio/default.png) no-repeat center top;
+}
+
+label:not([for]) input:checked + span {
+  background-position: center bottom;
+}
+
+/* 'Dangerous' switches */
+
+label:not([for]).danger input[type="checkbox"] + span {
+  background-image: url(switches/images/check/danger.png);
+}
+
+label:not([for]).danger input[type="radio"] + span {
+  background-image: url(switches/images/radio/danger.png);
+}
+
+
+/* ----------------------------------
+ * ON/OFF SWITCHES
+ * ---------------------------------- */
+
+label input[type="checkbox"][data-type="switch"] + span {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin: -1.1rem 0 0 -2.7rem;
+  width: 5.4rem;
+  height: 2.2rem;
+  pointer-events: none;
+  border: solid 1px #c2c2c2;
+  border-radius: 5.4rem;
+  overflow: hidden;
+  background: url(switches/images/switch/handler.png) no-repeat -0.2rem center;
+  background-size: auto calc(100% + 2px);
+  transition: background 0.18s ease;
+}
+
+label input[data-type="switch"] + span:after,
+label input[data-type="switch"] + span:before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 5.4rem;
+  z-index: -1;
+  transition: transform 0.2s ease;
+}
+
+label input[data-type="switch"] + span:before {
+  right: 100%;
+  background: #00c3ea url(switches/images/switch/icon.png) no-repeat 0.5rem center;
+  background-size: auto calc(100% - 2px);
+}
+
+label input[data-type="switch"] + span:after {
+  left: 100%;
+  background: #e6e6e6;
+  transform: translateX(-5.4rem);
+}
+
+/* switch: disabled state */
+label input[data-type="switch"]:disabled + span:before,
+label input[data-type="switch"]:disabled + span:after {
+  opacity: 0.2;
+}
+
+label input[data-type="switch"]:disabled + span {
+  opacity: 0.3;
+}
+
+label input[data-type="switch"]:checked:disabled + span {
+  opacity: 1;
+  border: solid 1px #A7DBE6;
+}
+
+/* 'ON' state */
+
+label input[data-type="switch"]:checked + span {
+  border-color: #00acce;
+  background-position: 3.2rem center;
+}
+
+label input[data-type="switch"]:checked + span:before {
+  transform: translateX(5.4rem);
+}
+
+label input[data-type="switch"]:checked + span:after {
+  transform: translateX(0);
+}
+