{"action":"created","issue":{"url":"https://api.github.com/repos/twbs/bootstrap/issues/15783","labels_url":"https://api.github.com/repos/twbs/bootstrap/issues/15783/labels{/name}","comments_url":"https://api.github.com/repos/twbs/bootstrap/issues/15783/comments","events_url":"https://api.github.com/repos/twbs/bootstrap/issues/15783/events","html_url":"https://github.com/twbs/bootstrap/issues/15783","id":57220977,"number":15783,"title":"BS v4: Add CSS Toggle Switch?","user":{"login":"kkirsche","id":947110,"avatar_url":"https://avatars.githubusercontent.com/u/947110?v=3","gravatar_id":"","url":"https://api.github.com/users/kkirsche","html_url":"https://github.com/kkirsche","followers_url":"https://api.github.com/users/kkirsche/followers","following_url":"https://api.github.com/users/kkirsche/following{/other_user}","gists_url":"https://api.github.com/users/kkirsche/gists{/gist_id}","starred_url":"https://api.github.com/users/kkirsche/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kkirsche/subscriptions","organizations_url":"https://api.github.com/users/kkirsche/orgs","repos_url":"https://api.github.com/users/kkirsche/repos","events_url":"https://api.github.com/users/kkirsche/events{/privacy}","received_events_url":"https://api.github.com/users/kkirsche/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/twbs/bootstrap/labels/feature","name":"feature","color":"4bb14b"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2015-02-10T19:12:52Z","updated_at":"2015-02-10T19:50:40Z","closed_at":null,"body":"Hey,\r\n\r\nWould it be of any interest in version four to do a pull request for a CSS only toggle switch? It would have animations and slide like you'd expect\r\n\r\nExample image:\r\n![screen shot 2015-02-10 at 2 11 00 pm](https://cloud.githubusercontent.com/assets/947110/6134353/b5a4d2b2-b12e-11e4-8b36-1dd8d3e8f526.png)\r\n\r\nEssentially:\r\n```html\r\n<label class=\"tgl\">\r\n  <input type=\"checkbox\" checked/>\r\n  <span class=\"tgl_body\">\r\n    <span class=\"tgl_switch\"></span>\r\n    <span class=\"tgl_track\">\r\n      <span class=\"tgl_bgd\"></span>\r\n      <span class=\"tgl_bgd tgl_bgd-negative\"></span>\r\n    </span>\r\n  </span>\r\n</label>\r\n```\r\n\r\nSCSS:\r\n```scss\r\n$toggle-height: 30px;\r\n$toggle-width: 60px;\r\n$switch-size: 30px;\r\n\r\n$anim-slight-bounce: cubic-bezier(0.34,1.61,0.7,1);\r\n$anim-speed-normal: 250ms;\r\n\r\n$border-color: #dadde1;\r\n$blue: #439fd8; // Guidebook blue\r\n\r\n//   BASE\r\n// -------------------------------------\r\n\r\n\r\n.tgl {\r\n\r\n  position: relative;\r\n  display: inline-block;\r\n  height: $toggle-height;\r\n  cursor: pointer;\r\n\r\n  > input {\r\n    position: absolute;\r\n    opacity: 0;\r\n    z-index: -1; /* Put the input behind the label so it doesn't overlay text */\r\n    visibility: hidden;\r\n  }\r\n\r\n  .tgl_body {\r\n    width: $toggle-width;\r\n    height: $toggle-height;\r\n    background: white;\r\n    border: 1px solid $border-color;\r\n    display: inline-block;\r\n    position: relative;\r\n    border-radius: 50px;\r\n  }\r\n\r\n  .tgl_switch {\r\n    width: $toggle-height;\r\n    height: $toggle-height;\r\n    display: inline-block;\r\n    background-color: white;\r\n    position: absolute;\r\n    left: -1px;\r\n    top: -1px;\r\n    border-radius: 50%;\r\n    border: 1px solid darken($border-color, 5%);\r\n    @include box-shadow(0 2px 2px rgba(0,0,0,.13));\r\n    @include transition(left $anim-slight-bounce $anim-speed-normal, transform $anim-slight-bounce $anim-speed-normal);\r\n    z-index: 1;\r\n  }\r\n\r\n  .tgl_track {\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    overflow: hidden;\r\n    border-radius: 50px;\r\n  }\r\n\r\n  .tgl_bgd {\r\n    position: absolute;\r\n    right: -10px; // 10 compensates for animation bounce\r\n    top: 0;\r\n    bottom: 0;\r\n    width: $toggle-width - ($switch-size / 2) + 10; // 10 compensates for animation bounce\r\n    @include transition(left $anim-slight-bounce $anim-speed-normal, right $anim-slight-bounce $anim-speed-normal);\r\n    background: $blue url('http://petelada.com/images/toggle/tgl_check.png') center center no-repeat;\r\n  }\r\n\r\n  .tgl_bgd-negative {\r\n    right: auto;\r\n    left: -($toggle-width - ($switch-size / 2));\r\n    background: white url('http://petelada.com/images/toggle/tgl_x.png') center center no-repeat;\r\n  }\r\n\r\n  &:hover {\r\n    .tgl_switch {\r\n      border-color: darken($border-color, 13%);\r\n      @include transform(scale(1.06));\r\n    }\r\n  }\r\n\r\n  &:active {\r\n    .tgl_switch {\r\n      @include transform(scale(.95));\r\n    }\r\n  }\r\n\r\n  > :not(:checked) ~ .tgl_body {\r\n\r\n    > .tgl_switch {\r\n      left: $toggle-width - $switch-size;\r\n    }\r\n\r\n    .tgl_bgd {\r\n      right: -($toggle-width - ($switch-size / 2));\r\n\r\n      &.tgl_bgd-negative {\r\n        right: auto;\r\n        left: -10px;\r\n      }\r\n    }\r\n  }\r\n}\r\n```"},"comment":{"url":"https://api.github.com/repos/twbs/bootstrap/issues/comments/73770482","html_url":"https://github.com/twbs/bootstrap/issues/15783#issuecomment-73770482","issue_url":"https://api.github.com/repos/twbs/bootstrap/issues/15783","id":73770482,"user":{"login":"mdo","id":98681,"avatar_url":"https://avatars.githubusercontent.com/u/98681?v=3","gravatar_id":"","url":"https://api.github.com/users/mdo","html_url":"https://github.com/mdo","followers_url":"https://api.github.com/users/mdo/followers","following_url":"https://api.github.com/users/mdo/following{/other_user}","gists_url":"https://api.github.com/users/mdo/gists{/gist_id}","starred_url":"https://api.github.com/users/mdo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mdo/subscriptions","organizations_url":"https://api.github.com/users/mdo/orgs","repos_url":"https://api.github.com/users/mdo/repos","events_url":"https://api.github.com/users/mdo/events{/privacy}","received_events_url":"https://api.github.com/users/mdo/received_events","type":"User","site_admin":true},"created_at":"2015-02-10T19:50:39Z","updated_at":"2015-02-10T19:50:39Z","body":"I'm probably in favor of it, but this exact proposal (the examples) are a little glitchy it looks like."}}