├── .editorconfig ├── .gitignore ├── .npmrc ├── LICENSE ├── README.md ├── bower.json ├── css ├── uiswitch.css ├── uiswitch.css.map └── uiswitch.min.css ├── example.html ├── package.json ├── uiswitch-demo.gif └── uiswitch.scss /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = crlf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | bower_components/ 3 | npm-debug.log 4 | .sass-cache 5 | node_modules 6 | yarn.lock 7 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 Christian Petersen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | CSS3 UISwitch 2 | ============= 3 | 4 | [![npm](https://img.shields.io/npm/v/uiswitch.svg)](https://www.npmjs.com/package/uiswitch) 5 | [![npm](https://img.shields.io/npm/dm/uiswitch.svg)](https://www.npmjs.com/package/uiswitch) 6 | 7 | A pretty sweet and pure CSS3 iOS 7 [UISwitch](https://developer.apple.com/library/ios/documentation/uikit/reference/uiswitch_class/Reference/Reference.html). 8 | 9 | ![UISwitch Demo](uiswitch-demo.gif) 10 | 11 | #### [See it in action!](http://codepen.io/cbp/pen/FLdjI) 12 | 13 | ## Grab it 14 | 15 | #### npm 16 | 17 | ``` 18 | npm install uiswitch 19 | ``` 20 | 21 | #### [Bower](http://bower.io/) 22 | 23 | ``` 24 | bower install uiswitch 25 | ``` 26 | 27 | #### Unpkg 28 | 29 | - [SCSS](https://unpkg.com/uiswitch) 30 | - [CSS](https://unpkg.com/uiswitch/css/uiswitch.css) 31 | - [Minified CSS](https://unpkg.com/uiswitch/css/uiswitch.css) 32 | 33 | ## Use it 34 | 35 | #### CSS 36 | 37 | The switch is very easy to customize. Using plain vanilla CSS it's just a matter of subclassing. Start styling your custom switch 38 | 39 | ```css 40 | /* Active Background Tint (when pressed and hold) */ 41 | .custom { 42 | background-color: #eadcbc; 43 | } 44 | 45 | /* Background Tint */ 46 | .custom::before { 47 | background-color: #f7f2e5; 48 | } 49 | 50 | /* Knob Tint */ 51 | .custom::after { 52 | background: #fff3a6; 53 | } 54 | 55 | /* Checked background tint */ 56 | .custom:checked { 57 | background-color: #ffca3f; /* fallback */ 58 | background-image: linear-gradient( 59 | -180deg, 60 | #ffca3f 0%, /* top */ 61 | #feca40 100% /* bottom */ 62 | ); 63 | } 64 | ``` 65 | 66 | and your HTML would be something like this 67 | 68 | ```html 69 | 70 | ``` 71 | 72 | #### Sass 73 | 74 | It's even easier with Sass. The class `.uiswitch` is provided out of the box but is also provided with a mixin and an extend (if you really want to customize it) 75 | 76 | You can change the global style for all `uiswitch` classes with the following variables: 77 | 78 | ```scss 79 | $uiswitch-thumb-tint: #ffffff !default; 80 | $uiswitch-on-tint: #4CD964 !default; 81 | 82 | $uiswitch-active-tint: #e5e5e5 !default; 83 | $uiswitch-on-tint-start: $uiswitch-on-tint !default; 84 | $uiswitch-on-tint-end: desaturate($uiswitch-on-tint-start, 1) !default; 85 | $uiswitch-off-tint: #ffffff !default; 86 | 87 | $uiswitch-size: 51px 31px !default; 88 | $uiswitch-frame-size: 47px 27px !default; 89 | $uiswitch-thumb-size: 27px !default; 90 | ``` 91 | 92 | If you'd like to create a custom class based on a switch: 93 | 94 | ```scss 95 | .my-switch { 96 | @include uiswitch( 97 | $on-tint: hotpink, 98 | $thumb-tint: lime, 99 | $off-tint: yellow, 100 | $active-tint: gray, 101 | $size: 24px 16px, 102 | $frame-size: 20px 12px, 103 | $thumb-size: 12px 104 | ); 105 | } 106 | ``` 107 | 108 | And if you want to customize it even further you can extend the `%uiswitch`: 109 | 110 | ```scss 111 | .my-switch { 112 | @extend %uiswitch; 113 | 114 | border-radius: 4px; 115 | 116 | // Background 117 | &::before { 118 | border-radius: 2px; 119 | } 120 | 121 | // Thumb 122 | &::after { 123 | border-radius: 1px; 124 | } 125 | 126 | // Checked background 127 | &:checked { 128 | background: hotpink; 129 | } 130 | 131 | // Checked thumb 132 | &:checked::after { 133 | background-color: #333; 134 | } 135 | } 136 | ``` 137 | 138 | ## License 139 | 140 | [The MIT License](LICENSE) 141 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "uiswitch", 3 | "version": "1.1.1", 4 | "authors": [ 5 | "Christian Petersen " 6 | ], 7 | "description": "A sweet and pure CSS3 iOS 7 UISwitch", 8 | "main": "uiswitch.scss", 9 | "keywords": [ 10 | "css", 11 | "scss", 12 | "sass", 13 | "ios", 14 | "switch", 15 | "button", 16 | "checkbox", 17 | "ui", 18 | "component" 19 | ], 20 | "license": "MIT", 21 | "homepage": "https://github.com/fnky/css3-uiswitch", 22 | "ignore": [ 23 | "**/.*", 24 | "node_modules", 25 | "bower_components", 26 | "test", 27 | "tests", 28 | "uiswitch-demo.gif", 29 | "example.html" 30 | ], 31 | "dependencies": {} 32 | } 33 | -------------------------------------------------------------------------------- /css/uiswitch.css: -------------------------------------------------------------------------------- 1 | /*! uiswitch v1.1.0 | MIT License | github.com/fnky/css3-uiswitch */ 2 | .uiswitch { 3 | height: 31px; 4 | width: 51px; 5 | -webkit-appearance: none; 6 | -moz-appearance: none; 7 | appearance: none; 8 | box-sizing: border-box; 9 | position: relative; 10 | border-radius: 16px; 11 | cursor: pointer; 12 | outline: 0; 13 | z-index: 0; 14 | margin: 0; 15 | padding: 0; 16 | border: none; 17 | background-color: #e5e5e5; 18 | -webkit-touch-callout: none; 19 | -webkit-text-size-adjust: none; 20 | -webkit-tap-highlight-color: transparent; 21 | -webkit-user-select: none; 22 | } 23 | 24 | .uiswitch::before { 25 | height: 27px; 26 | width: 47px; 27 | box-sizing: border-box; 28 | content: ' '; 29 | position: absolute; 30 | left: 2px; 31 | top: 2px; 32 | background-color: #ffffff; 33 | border-radius: 16px; 34 | z-index: 1; 35 | -webkit-transition-duration: 300ms; 36 | transition-duration: 300ms; 37 | -webkit-transform: scale(1); 38 | transform: scale(1); 39 | } 40 | 41 | .uiswitch::after { 42 | height: 27px; 43 | width: 27px; 44 | box-sizing: border-box; 45 | content: ' '; 46 | position: absolute; 47 | border-radius: 27px; 48 | background: #ffffff; 49 | z-index: 2; 50 | top: 2px; 51 | left: 2px; 52 | box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25), 0px 4px 11px 0px rgba(0, 0, 0, 0.08), -1px 3px 3px 0px rgba(0, 0, 0, 0.14); 53 | -webkit-transition: width 280ms, -webkit-transform 300ms; 54 | transition: width 280ms, -webkit-transform 300ms; 55 | transition: transform 300ms, width 280ms; 56 | transition: transform 300ms, width 280ms, -webkit-transform 300ms; 57 | -webkit-transform: translate3d(0, 0, 0); 58 | transform: translate3d(0, 0, 0); 59 | -webkit-transition-timing-function: cubic-bezier(0.42, 0.8, 0.58, 1.2); 60 | transition-timing-function: cubic-bezier(0.42, 0.8, 0.58, 1.2); 61 | } 62 | 63 | .uiswitch:checked { 64 | background-image: -webkit-linear-gradient(top, #4CD964 0%, #4dd865 100%); 65 | background-image: linear-gradient(-180deg, #4CD964 0%, #4dd865 100%); 66 | } 67 | 68 | .uiswitch:checked::after { 69 | -webkit-transform: translate3d(16px, 0, 0); 70 | transform: translate3d(16px, 0, 0); 71 | right: 18px; 72 | left: inherit; 73 | } 74 | 75 | .uiswitch:active::after { 76 | width: 35px; 77 | } 78 | 79 | .uiswitch:checked::before, .uiswitch:active::before { 80 | -webkit-transform: scale(0); 81 | transform: scale(0); 82 | } 83 | 84 | .uiswitch:disabled { 85 | opacity: 0.5; 86 | cursor: default; 87 | -webkit-transition: none; 88 | transition: none; 89 | } 90 | 91 | .uiswitch:disabled:active::before, .uiswitch:disabled:active::after, .uiswitch:disabled:checked:active::before, .uiswitch:disabled:checked::before { 92 | width: 27px; 93 | -webkit-transition: none; 94 | transition: none; 95 | } 96 | 97 | .uiswitch:disabled:active::before { 98 | height: 27px; 99 | width: 47px; 100 | -webkit-transform: translate3d(6px, 0, 0); 101 | transform: translate3d(6px, 0, 0); 102 | } 103 | 104 | .uiswitch:disabled:checked:active::before { 105 | height: 27px; 106 | width: 27px; 107 | -webkit-transform: scale(0); 108 | transform: scale(0); 109 | } 110 | 111 | .uiswitch { 112 | background-color: #e5e5e5; 113 | } 114 | 115 | .uiswitch::before { 116 | background-color: #ffffff; 117 | } 118 | 119 | .uiswitch::after { 120 | background: #ffffff; 121 | } 122 | 123 | .uiswitch:checked { 124 | background-image: -webkit-linear-gradient(top, #4CD964 0%, #4dd865 100%); 125 | background-image: linear-gradient(-180deg, #4CD964 0%, #4dd865 100%); 126 | } 127 | /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3Vpc3dpdGNoLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsb0VBQW9FO0FBZ0NwRTtFQXBCSSxhQWdCcUI7RUFackIsWUFZZ0I7RUFNbEIseUJBQWdCO0tBQWhCLHNCQUFnQjtVQUFoQixpQkFBZ0I7RUFDaEIsdUJBQXNCO0VBQ3RCLG1CQUFrQjtFQUNsQixvQkFBbUI7RUFDbkIsZ0JBQWU7RUFDZixXQUFVO0VBQ1YsV0FBVTtFQUNWLFVBQVM7RUFDVCxXQUFVO0VBQ1YsYUFBWTtFQUNaLDBCQXJCNEI7RUF1QjVCLDRCQUEyQjtFQUMzQiwrQkFBOEI7RUFDOUIseUNBQTBDO0VBQzFDLDBCQUF5QjtDQW1GMUI7O0FBcEdEO0VBcEJJLGFBaUIyQjtFQWIzQixZQWFzQjtFQXlCdEIsdUJBQXNCO0VBQ3RCLGFBQVk7RUFDWixtQkFBa0I7RUFDbEIsVUFBUztFQUNULFNBQVE7RUFDUiwwQkFqQ3VCO0VBa0N2QixvQkFBbUI7RUFDbkIsV0FBVTtFQUNWLG1DQUEwQjtVQUExQiwyQkFBMEI7RUFDMUIsNEJBQW1CO1VBQW5CLG9CQUFtQjtDQUNwQjs7QUFoQ0g7RUFwQkksYUFrQnNCO0VBZHRCLFlBY3NCO0VBdUN0Qix1QkFBc0I7RUFDdEIsYUFBWTtFQUNaLG1CQUFrQjtFQUNsQixvQkFBbUI7RUFDbkIsb0JBckR5QjtFQXNEekIsV0FBVTtFQUNWLFNBQVE7RUFDUixVQUFTO0VBQ1QsNEhBRTZDO0VBQzdDLHlEQUF3QztFQUF4QyxpREFBd0M7RUFBeEMseUNBQXdDO0VBQXhDLGtFQUF3QztFQUN4Qyx3Q0FBK0I7VUFBL0IsZ0NBQStCO0VBQy9CLHVFQUFnRTtVQUFoRSwrREFBZ0U7Q0FDakU7O0FBbkRIO0VBdURJLHlFQUNzRTtFQUR0RSxxRUFDc0U7Q0FDdkU7O0FBekRIO0VBNkRJLDJDQUFrQztVQUFsQyxtQ0FBa0M7RUFDbEMsWUFBVztFQUNYLGNBQWE7Q0FDZDs7QUFoRUg7RUFvRUksWUFBVztDQUNaOztBQXJFSDtFQXlFSSw0QkFBbUI7VUFBbkIsb0JBQW1CO0NBQ3BCOztBQTFFSDtFQThFSSxhQUFZO0VBQ1osZ0JBQWU7RUFDZix5QkFBZ0I7RUFBaEIsaUJBQWdCO0NBbUJqQjs7QUFuR0g7RUFzRk0sWUF4Rm9CO0VBeUZwQix5QkFBZ0I7RUFBaEIsaUJBQWdCO0NBQ2pCOztBQXhGTDtFQXBCSSxhQWlCMkI7RUFiM0IsWUFhc0I7RUErRnBCLDBDQUFpQztVQUFqQyxrQ0FBaUM7Q0FDbEM7O0FBN0ZMO0VBcEJJLGFBa0JzQjtFQWR0QixZQWNzQjtFQW1HcEIsNEJBQW1CO1VBQW5CLG9CQUFtQjtDQUNwQjs7QUFrQ0w7RUFyQkUsMEJBeEg0QjtDQStJN0I7O0FBbEJDO0VBQ0UsMEJBM0h1QjtDQTRIeEI7O0FBRUQ7RUFDRSxvQkFySXlCO0NBc0kxQjs7QUFFRDtFQUNFLHlFQUM2RDtFQUQ3RCxxRUFDNkQ7Q0FDOUQiLCJmaWxlIjoidWlzd2l0Y2guY3NzIn0= */ -------------------------------------------------------------------------------- /css/uiswitch.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "file": "uiswitch.css", 4 | "sources": [ 5 | "../uiswitch.scss" 6 | ], 7 | "names": [], 8 | "mappings": "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" 9 | } -------------------------------------------------------------------------------- /css/uiswitch.min.css: -------------------------------------------------------------------------------- 1 | /*! uiswitch v1.1.0 | MIT License | github.com/fnky/css3-uiswitch */.uiswitch{height:31px;width:51px;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;position:relative;border-radius:16px;cursor:pointer;outline:0;z-index:0;margin:0;padding:0;border:none;-webkit-touch-callout:none;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;background-color:#e5e5e5}.uiswitch::after,.uiswitch::before{box-sizing:border-box;content:' ';position:absolute;top:2px;left:2px;height:27px}.uiswitch::before{width:47px;border-radius:16px;z-index:1;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transform:scale(1);transform:scale(1);background-color:#fff}.uiswitch::after{width:27px;border-radius:27px;z-index:2;box-shadow:0 0 1px 0 rgba(0,0,0,.25),0 4px 11px 0 rgba(0,0,0,.08),-1px 3px 3px 0 rgba(0,0,0,.14);-webkit-transition:width 280ms,-webkit-transform .3s;transition:width 280ms,-webkit-transform .3s;transition:transform .3s,width 280ms;transition:transform .3s,width 280ms,-webkit-transform .3s;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition-timing-function:cubic-bezier(.42,.8,.58,1.2);transition-timing-function:cubic-bezier(.42,.8,.58,1.2);background:#fff}.uiswitch:checked::after{-webkit-transform:translate3d(16px,0,0);transform:translate3d(16px,0,0);right:18px;left:inherit}.uiswitch:active::after{width:35px}.uiswitch:active::before,.uiswitch:checked::before{-webkit-transform:scale(0);transform:scale(0)}.uiswitch:disabled{opacity:.5;cursor:default;-webkit-transition:none;transition:none}.uiswitch:disabled:active::after,.uiswitch:disabled:active::before,.uiswitch:disabled:checked::before,.uiswitch:disabled:checked:active::before{width:27px;-webkit-transition:none;transition:none}.uiswitch:disabled:active::before{height:27px;width:47px;-webkit-transform:translate3d(6px,0,0);transform:translate3d(6px,0,0)}.uiswitch:disabled:checked:active::before{height:27px;width:27px;-webkit-transform:scale(0);transform:scale(0)}.uiswitch:checked{background-image:-webkit-linear-gradient(top,#4CD964 0,#4dd865 100%);background-image:linear-gradient(-180deg,#4CD964 0,#4dd865 100%)} 2 | -------------------------------------------------------------------------------- /example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | UISwitch Example 7 | 8 | 88 | 89 | 90 | 91 |
92 |

CSS3 UISwitch Example

93 | 94 |
95 |
96 | 97 |
Off (unchecked)
98 |
99 |
100 | 101 |
On (checked)
102 |
103 | 104 |
105 | 106 |
Disabled Off
107 |
108 | 109 |
110 | 111 |
Disabled On
112 |
113 | 114 |
115 | 116 |
Custom
117 |
118 | 119 |
120 | 121 |
Custom
122 |
123 |
124 | 125 |
126 |

It's a one liner!

127 | 
<input type="checkbox" class="uiswitch">
128 |

Or just use SCSS and customize it too!

129 | 
import 'uiswitch';
130 | 
131 | $uiswitch-thumb-tint: #ffffff;
132 | $uiswitch-on-tint: red;
133 |
134 |
135 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "uiswitch", 3 | "version": "1.1.1", 4 | "homepage": "https://github.com/fnky/css3-uiswitch", 5 | "author": "Christian Petersen (http://cbp.io)", 6 | "description": "A sweet and pure CSS3 iOS 7 UISwitch", 7 | "main": "uiswitch.scss", 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/fnky/css3-uiswitch.git" 11 | }, 12 | "license": "MIT", 13 | "keywords": [ 14 | "css", 15 | "scss", 16 | "sass", 17 | "ios", 18 | "switch", 19 | "button", 20 | "checkbox", 21 | "ui", 22 | "component" 23 | ], 24 | "bugs": { 25 | "url": "https://github.com/fnky/css3-uiswitch/issues" 26 | }, 27 | "scripts": { 28 | "build": "npm run build-clean && npm run build-sass && npm run build-autoprefix", 29 | "build-autoprefix": "postcss --use autoprefixer --output css/uiswitch.css css/uiswitch.css", 30 | "build-clean": "rm -rf css", 31 | "build-sass": "node-sass --output-style expanded --source-map true uiswitch.scss css/uiswitch.css", 32 | "start": "npm run build-sass -- --watch" 33 | }, 34 | "files": [ 35 | "css", 36 | "sass", 37 | "uiswitch.scss", 38 | "LICENSE", 39 | "README.md" 40 | ], 41 | "devDependencies": { 42 | "autoprefixer": "^6.7.5", 43 | "node-sass": "^4.5.0", 44 | "postcss-cli": "^3.0.0-beta" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /uiswitch-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fnky/css3-uiswitch/fd176d9c6bfde142adcf4dec678a46661a344fc9/uiswitch-demo.gif -------------------------------------------------------------------------------- /uiswitch.scss: -------------------------------------------------------------------------------- 1 | /*! uiswitch v1.1.0 | MIT License | github.com/fnky/css3-uiswitch */ 2 | @charset "utf-8"; 3 | 4 | @mixin size($size) { 5 | $height: nth($size, 1); 6 | $width: $height; 7 | 8 | @if length($size) > 1 { 9 | $height: nth($size, 2); 10 | } 11 | 12 | @if $height == auto or (type-of($height) == number and not unitless($height)) { 13 | height: $height; 14 | } 15 | 16 | @if $width == auto or (type-of($width) == number and not unitless($width)) { 17 | width: $width; 18 | } 19 | } 20 | 21 | $uiswitch-thumb-tint: #ffffff !default; 22 | $uiswitch-on-tint: #4CD964 !default; 23 | 24 | $uiswitch-active-tint: #e5e5e5 !default; 25 | $uiswitch-on-tint-start: $uiswitch-on-tint !default; 26 | $uiswitch-on-tint-end: desaturate($uiswitch-on-tint-start, 1) !default; 27 | $uiswitch-off-tint: #ffffff !default; 28 | 29 | $uiswitch-size: 51px 31px !default; 30 | $uiswitch-frame-size: 47px 27px !default; 31 | $uiswitch-thumb-size: 27px !default; 32 | 33 | %uiswitch { 34 | @include size($uiswitch-size); 35 | appearance: none; 36 | box-sizing: border-box; 37 | position: relative; 38 | border-radius: 16px; 39 | cursor: pointer; 40 | outline: 0; 41 | z-index: 0; 42 | margin: 0; 43 | padding: 0; 44 | border: none; 45 | background-color: $uiswitch-active-tint; 46 | 47 | -webkit-touch-callout: none; 48 | -webkit-text-size-adjust: none; 49 | -webkit-tap-highlight-color: rgba(0,0,0,0); 50 | -webkit-user-select: none; 51 | 52 | // Frame 53 | &::before { 54 | @include size($uiswitch-frame-size); 55 | box-sizing: border-box; 56 | content: ' '; 57 | position: absolute; 58 | left: 2px; 59 | top: 2px; 60 | background-color: $uiswitch-off-tint; 61 | border-radius: 16px; 62 | z-index: 1; 63 | transition-duration: 300ms; 64 | transform: scale(1); 65 | } 66 | 67 | // Thumb 68 | &::after { 69 | @include size($uiswitch-thumb-size); 70 | box-sizing: border-box; 71 | content: ' '; 72 | position: absolute; 73 | border-radius: 27px; 74 | background: $uiswitch-thumb-tint; 75 | z-index: 2; 76 | top: 2px; 77 | left: 2px; 78 | box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.25), 79 | 0px 4px 11px 0px rgba(0,0,0,0.08), 80 | -1px 3px 3px 0px rgba(0,0,0,0.14); 81 | transition: transform 300ms, width 280ms; 82 | transform: translate3d(0, 0, 0); 83 | transition-timing-function: cubic-bezier(0.42, 0.800, 0.58, 1.2); 84 | } 85 | 86 | // Background tint for ON state 87 | &:checked { 88 | background-image: linear-gradient(-180deg, $uiswitch-on-tint-start 0%, 89 | $uiswitch-on-tint-end 100%); 90 | } 91 | 92 | // Thumb for ON state 93 | &:checked::after { 94 | transform: translate3d(16px, 0, 0); 95 | right: 18px; 96 | left: inherit; 97 | } 98 | 99 | // Thumb for active state 100 | &:active::after { 101 | width: 35px; 102 | } 103 | 104 | &:checked::before, 105 | &:active::before { 106 | transform: scale(0); 107 | } 108 | 109 | // Disabled 110 | &:disabled { 111 | opacity: 0.5; 112 | cursor: default; 113 | transition: none; 114 | 115 | &:active::before, 116 | &:active::after, 117 | &:checked:active::before, 118 | &:checked::before { 119 | width: $uiswitch-thumb-size; 120 | transition: none; 121 | } 122 | 123 | &:active::before { 124 | @include size($uiswitch-frame-size); 125 | transform: translate3d(6px, 0, 0); 126 | } 127 | 128 | &:checked:active::before { 129 | @include size($uiswitch-thumb-size); 130 | transform: scale(0); 131 | } 132 | } 133 | } 134 | 135 | @mixin uiswitch($on-tint: $uiswitch-on-tint, 136 | $thumb-tint: $uiswitch-thumb-tint, 137 | $off-tint: $uiswitch-off-tint, 138 | $active-tint: $uiswitch-active-tint, 139 | $size: $uiswitch-size, 140 | $frame-size: $uiswitch-frame-size, 141 | $thumb-size: $uiswitch-thumb-size) { 142 | 143 | @extend %uiswitch; 144 | background-color: $active-tint; 145 | 146 | $on-tint-start: $on-tint; 147 | $on-tint-end: desaturate($on-tint-start, 1); 148 | 149 | &::before { 150 | background-color: $off-tint; 151 | } 152 | 153 | &::after { 154 | background: $thumb-tint; 155 | } 156 | 157 | &:checked { 158 | background-image: linear-gradient(-180deg, $on-tint-start 0%, 159 | $on-tint-end 100%); 160 | } 161 | 162 | } 163 | 164 | // Make .uiswitch class available out of the box 165 | .uiswitch { 166 | @include uiswitch(); 167 | } 168 | --------------------------------------------------------------------------------