fabric8-planner/app/widgets/switch/switch.component.css

A planner front-end for Fabric8.

.f8-switch {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 28px;
  border: 1px solid;
  border-color: #bbb;
}
.f8-switch input {
  display: none;
}
.f8-switch--slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 12px;
  background-color: #fff;
  cursor: pointer;
  transition: .4s;
}
.f8-switch--slider:before {
  position: absolute;
  width: 39px;
  top: 0;
  left: 0;
  bottom: 0;
  background: #fafafa;
  background-image: linear-gradient(to bottom, #fafafa 0, #ededed 100%);
  content: '';
  box-shadow: 0 0 2px rgba(3, 3, 3, 0.4);
  transition: .4s;
}
.f8-switch__on {
  display: inline-block;
  margin-top: 3px;
  margin-left: 8px;
  color: #fff;
}
.f8-switch__off {
  display: inline-block;
  margin-left: 20px;
  color: #292e34;
}
.f8-switch input:checked + .f8-switch--slider {
  background-color: #0088ce;
}
.f8-switch input:focus + .f8-switch--slider {
  box-shadow: 0 0 1px #0088ce;
}
.f8-switch input:checked + .f8-switch--slider:before {
  transform: translateX(100%);
}

/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImFwcC93aWRnZXRzL3N3aXRjaC9zd2l0Y2guY29tcG9uZW50LmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFLGtCQUFBO0VBQ0EscUJBQUE7RUFDQSxXQUFBO0VBQ0EsWUFBQTtFQUNBLGlCQUFBO0VBQ0Esa0JBQUE7O0FBRUYsVUFBVztFQUNULGFBQUE7O0FBRUY7RUFDRSxrQkFBQTtFQUNBLE1BQUE7RUFDQSxPQUFBO0VBQ0EsUUFBQTtFQUNBLFNBQUE7RUFDQSxlQUFBO0VBQ0Esc0JBQUE7RUFDQSxlQUFBO0VBQ0EsZUFBQTs7QUFFRixrQkFBa0I7RUFDaEIsa0JBQUE7RUFDQSxXQUFBO0VBQ0EsTUFBQTtFQUNBLE9BQUE7RUFDQSxTQUFBO0VBQ0EsbUJBQUE7RUFDQSxrQkFBa0IsbURBQWxCO0VBQ0EsU0FBUyxFQUFUO0VBQ0Esc0NBQUE7RUFDQSxlQUFBOztBQUVGO0VBQ0UscUJBQUE7RUFDQSxlQUFBO0VBQ0EsZ0JBQUE7RUFDQSxXQUFBOztBQUVGO0VBQ0UscUJBQUE7RUFDQSxpQkFBQTtFQUNBLGNBQUE7O0FBRUYsVUFBVyxNQUFLLFFBQVM7RUFDdkIseUJBQUE7O0FBRUYsVUFBVyxNQUFLLE1BQU87RUFDckIsMkJBQUE7O0FBRUYsVUFBVyxNQUFLLFFBQVMscUJBQW9CO0VBQzNDLFdBQVcsZ0JBQVgiLCJmaWxlIjoiYXBwL3dpZGdldHMvc3dpdGNoL3N3aXRjaC5jb21wb25lbnQuY3NzIiwic291cmNlc0NvbnRlbnQiOltdfQ== */