├── .gitignore ├── .npmignore ├── Gruntfile.js ├── LICENSE ├── README.md ├── css └── picker.css ├── examples ├── demo.css ├── demo.html ├── demo.js └── demo.jsx ├── icons ├── Read Me.txt ├── demo-files │ ├── demo.css │ └── demo.js ├── demo.html ├── fonts │ ├── icomoon.eot │ ├── icomoon.svg │ ├── icomoon.ttf │ └── icomoon.woff ├── selection.json └── style.css ├── lib └── picker.js ├── package.json ├── scss ├── bourbon │ ├── _bourbon-deprecated-upcoming.scss │ ├── _bourbon.scss │ ├── addons │ │ ├── _border-color.scss │ │ ├── _border-radius.scss │ │ ├── _border-style.scss │ │ ├── _border-width.scss │ │ ├── _buttons.scss │ │ ├── _clearfix.scss │ │ ├── _ellipsis.scss │ │ ├── _font-stacks.scss │ │ ├── _hide-text.scss │ │ ├── _margin.scss │ │ ├── _padding.scss │ │ ├── _position.scss │ │ ├── _prefixer.scss │ │ ├── _retina-image.scss │ │ ├── _size.scss │ │ ├── _text-inputs.scss │ │ ├── _timing-functions.scss │ │ ├── _triangle.scss │ │ └── _word-wrap.scss │ ├── css3 │ │ ├── _animation.scss │ │ ├── _appearance.scss │ │ ├── _backface-visibility.scss │ │ ├── _background-image.scss │ │ ├── _background.scss │ │ ├── _border-image.scss │ │ ├── _calc.scss │ │ ├── _columns.scss │ │ ├── _filter.scss │ │ ├── _flex-box.scss │ │ ├── _font-face.scss │ │ ├── _font-feature-settings.scss │ │ ├── _hidpi-media-query.scss │ │ ├── _hyphens.scss │ │ ├── _image-rendering.scss │ │ ├── _keyframes.scss │ │ ├── _linear-gradient.scss │ │ ├── _perspective.scss │ │ ├── _placeholder.scss │ │ ├── _radial-gradient.scss │ │ ├── _selection.scss │ │ ├── _text-decoration.scss │ │ ├── _transform.scss │ │ ├── _transition.scss │ │ └── _user-select.scss │ ├── functions │ │ ├── _assign-inputs.scss │ │ ├── _contains-falsy.scss │ │ ├── _contains.scss │ │ ├── _is-length.scss │ │ ├── _is-light.scss │ │ ├── _is-number.scss │ │ ├── _is-size.scss │ │ ├── _modular-scale.scss │ │ ├── _px-to-em.scss │ │ ├── _px-to-rem.scss │ │ ├── _shade.scss │ │ ├── _strip-units.scss │ │ ├── _tint.scss │ │ ├── _transition-property-name.scss │ │ └── _unpack.scss │ ├── helpers │ │ ├── _convert-units.scss │ │ ├── _directional-values.scss │ │ ├── _font-source-declaration.scss │ │ ├── _gradient-positions-parser.scss │ │ ├── _linear-angle-parser.scss │ │ ├── _linear-gradient-parser.scss │ │ ├── _linear-positions-parser.scss │ │ ├── _linear-side-corner-parser.scss │ │ ├── _radial-arg-parser.scss │ │ ├── _radial-gradient-parser.scss │ │ ├── _radial-positions-parser.scss │ │ ├── _render-gradients.scss │ │ ├── _shape-size-stripper.scss │ │ └── _str-to-num.scss │ └── settings │ │ ├── _asset-pipeline.scss │ │ ├── _prefixer.scss │ │ └── _px-to-em.scss ├── demo.scss ├── fonts.scss ├── pack-picker.scss └── picker.scss ├── snapshots ├── mobile-form.jpg ├── mobile-picker.jpg ├── pc-form.jpg ├── pc-picker-light.jpg └── pc-picker.jpg ├── src └── picker.jsx ├── webpack.config.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | .idea/ 3 | 4 | *.scssc 5 | 6 | node_modules/* 7 | 8 | snapshots/*.psd 9 | 10 | *.log 11 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | *.md 2 | .git* 3 | Gruntfile.js 4 | webpack.config.js 5 | src/ 6 | test/ 7 | examples/ 8 | icons/ 9 | scss/demo.scss 10 | scss/fonts.scss -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const sass = require('node-sass') 4 | 5 | 6 | var webpack_cfg = require('./webpack.config') 7 | //var extend = require('util')._extend 8 | 9 | module.exports = function(grunt) { 10 | require('load-grunt-tasks')(grunt) 11 | 12 | grunt.initConfig({ 13 | pkg: grunt.file.readJSON('package.json'), 14 | tag: { 15 | banner: '/*!\n' 16 | + ' * <%= pkg.name %>\n' 17 | + ' * @version <%= pkg.version %>\n' 18 | + ' */\n', 19 | }, 20 | sass: { 21 | options: { 22 | implementation: sass, 23 | style: 'expanded', 24 | compass: true, 25 | //sourcemap: 'none', 26 | //for grunt-sass 27 | sourceMap: false, 28 | }, 29 | dev: { 30 | files: [ 31 | { 32 | expand: true, 33 | cwd: './scss', 34 | src: [ 'demo.scss' ], 35 | dest: './examples', 36 | ext: '.css', 37 | }, 38 | ], 39 | }, 40 | dist: { 41 | files: [ 42 | { './css/picker.css': './scss/pack-picker.scss' }, 43 | ], 44 | }, 45 | }, 46 | babel: { 47 | options: { 48 | //sourceMap: true 49 | } 50 | , dist: { 51 | files: [ 52 | { 53 | expand: true 54 | , cwd: './src' 55 | , src: [ '**/*.jsx', '**/*.js' ] 56 | , dest: './lib' 57 | , ext: '.js' 58 | } 59 | ] 60 | } 61 | } 62 | , watch: { 63 | css: { 64 | files: './scss/*.scss' 65 | , tasks: ['sass:dev'] 66 | } 67 | , react: { 68 | files: ['./src/*.jsx', './src/*.js', './examples/*.jsx'] 69 | , tasks: ['webpack:demo'] 70 | } 71 | } 72 | , clean: { 73 | all: ["./examples/demo.js", "./examples/*.css", "./css/*.*", "./lib/*.*"] 74 | } 75 | , webpack: { 76 | demo: webpack_cfg 77 | } 78 | }) 79 | 80 | // grunt.loadNpmTasks('grunt-contrib-watch') 81 | // grunt.loadNpmTasks('grunt-sass') 82 | // grunt.loadNpmTasks('grunt-contrib-clean') 83 | // grunt.loadNpmTasks('grunt-babel') 84 | // grunt.loadNpmTasks('grunt-webpack') 85 | 86 | 87 | grunt.registerTask('default', ['sass:dev', 'webpack:demo', 'babel']) 88 | grunt.registerTask('dev', ['sass:dev', 'webpack:demo', 'babel', 'watch']) 89 | grunt.registerTask('build', ['sass:dist', 'babel']) 90 | 91 | grunt.registerTask('wp', ['webpack:demo']) 92 | 93 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 nickeljew 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 all 13 | 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 THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React-Picker 2 | 3 | Picker Component offers a popup options list with responsive layouts. 4 | 5 | 6 | ## Changelogs 7 | #### v1.2.16 8 | - upgrade for security alert 9 | 10 | #### v1.2.13 11 | - removed webpack-dev-server dependency 12 | 13 | #### v1.2.11 14 | - Update react-tapper to 0.1.15; update dependencies 15 | 16 | #### v1.2.10 17 | - Update demo link in readme 18 | 19 | #### v1.2.9 20 | - Upgrade babel-loader & update readme 21 | 22 | #### v1.2.8 23 | - Added .npmignore 24 | 25 | #### v1.2.7 26 | - Update for react v15.5.x 27 | 28 | 29 | ## Installation 30 | 31 | yarn add react-picker 32 | or 33 | 34 | npm install react-picker --save 35 | 36 | ## Snapshots 37 | 38 | ![PC WEB](https://raw.githubusercontent.com/nickeljew/react-picker/master/snapshots/pc-picker-light.jpg "PC Browser View") 39 | 40 | ![Mobile WEB](https://raw.githubusercontent.com/nickeljew/react-picker/master/snapshots/mobile-picker.jpg "Mobile Browser View") 41 | 42 | ## Demo 43 | 44 | Demo file in repository: ./examples/demo.html 45 | 46 | ## Example 47 | 48 | ./examples/demo.jsx 49 | 50 | #### Import component into your react project 51 | 52 | ``` 53 | import Picker from 'react-picker' 54 | ``` 55 | 56 | ``` 57 | 86 | ``` 87 | 88 | OptionBox is a customized component defined for the demo. 89 | 90 | 91 | #### Using CSS/SCSS 92 | 93 | CSS: import css/picker.css 94 | 95 | SCSS: 1) import bourbon library (http://bourbon.io/), 2) import scss/picker.scss 96 | 97 | 98 | #### Properites 99 | 100 | @value: Default selected option value 101 | 102 | @options: Options of the picker 103 | 104 | @onChange: callback on changing selected option 105 | 106 | @onShow: callback on calling show method 107 | 108 | @onDismiss: callback on calling dismiss method 109 | 110 | @onClickAway: callback on clicking area outside the picker panel 111 | 112 | @width: width of the picker panel 113 | 114 | @theme: theme setting of month-picker; 2 options (light/dark); default theme is light 115 | 116 | 117 | ## License 118 | 119 | [MIT](http://www.opensource.org/licenses/mit-license.php) -------------------------------------------------------------------------------- /css/picker.css: -------------------------------------------------------------------------------- 1 | .picker { 2 | position: relative; } 3 | .picker > .container { 4 | position: relative; 5 | box-sizing: border-box; 6 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 7 | z-index: 100; 8 | top: 1px; 9 | left: -10000px; 10 | -webkit-transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms; 11 | -moz-transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms; 12 | transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms; } 13 | @media screen and (max-width: 767px) { 14 | .picker > .container { 15 | position: fixed; 16 | top: 0; 17 | left: -10000px; 18 | width: 100%; 19 | height: 100%; } } 20 | .picker > .container.table { 21 | display: table; } 22 | .picker > .container.show { 23 | left: 0; 24 | -webkit-transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; 25 | -moz-transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; 26 | transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; } 27 | .picker > .container.show .overlay { 28 | left: 0; } 29 | .picker > .container .overlay { 30 | position: fixed; 31 | height: 100%; 32 | width: 100%; 33 | z-index: 9; 34 | top: 0; 35 | left: -10000px; 36 | opacity: 1; 37 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 38 | will-change: opacity; 39 | -webkit-transform: translateZ(0); 40 | -moz-transform: translateZ(0); 41 | -ms-transform: translateZ(0); 42 | -o-transform: translateZ(0); 43 | transform: translateZ(0); 44 | -webkit-transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, opacity 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; 45 | -moz-transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, opacity 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; 46 | transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, opacity 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; } 47 | @media screen and (max-width: 767px) { 48 | .picker > .container .overlay { 49 | background-color: rgba(0, 0, 0, 0.25); } } 50 | .picker > .container .cell { 51 | display: table-cell; 52 | box-sizing: border-box; 53 | width: 100%; 54 | height: 100%; } 55 | .picker > .container .popup { 56 | position: absolute; 57 | box-sizing: border-box; 58 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 59 | -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1); 60 | -moz-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1); 61 | transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1); 62 | margin: 0 auto; 63 | z-index: 10; 64 | font-size: 1.2rem; 65 | opacity: 0; } 66 | @media screen and (max-width: 767px) { 67 | .picker > .container .popup { 68 | bottom: 0; 69 | width: 100%; 70 | max-width: 100%; 71 | height: 23.8rem; 72 | -webkit-transform: translate3d(0, 23.8rem, 0); 73 | -moz-transform: translate3d(0, 23.8rem, 0); 74 | -ms-transform: translate3d(0, 23.8rem, 0); 75 | -o-transform: translate3d(0, 23.8rem, 0); 76 | transform: translate3d(0, 23.8rem, 0); } } 77 | @media screen and (min-width: 768px) { 78 | .picker > .container .popup { 79 | height: 23.8rem; 80 | width: 20rem; 81 | -webkit-transform: translate3d(0, -64px, 0); 82 | -moz-transform: translate3d(0, -64px, 0); 83 | -ms-transform: translate3d(0, -64px, 0); 84 | -o-transform: translate3d(0, -64px, 0); 85 | transform: translate3d(0, -64px, 0); } } 86 | .picker > .container .popup.show { 87 | opacity: 1; 88 | -webkit-transform: translate3d(0, 0, 0); 89 | -moz-transform: translate3d(0, 0, 0); 90 | -ms-transform: translate3d(0, 0, 0); 91 | -o-transform: translate3d(0, 0, 0); 92 | transform: translate3d(0, 0, 0); } 93 | .picker > .container .popup:after { 94 | content: ' '; 95 | clear: both; 96 | display: table; } 97 | .picker > .container .popup .list-wrap { 98 | float: left; 99 | width: 100%; 100 | height: 100%; 101 | overflow-x: hidden; 102 | overflow-y: auto; } 103 | .picker > .container .popup .list-wrap ul, .picker > .container .popup .list-wrap li { 104 | list-style-type: none; 105 | margin: 0; 106 | padding: 0; } 107 | .picker > .container .popup .list-wrap ul { 108 | display: block; 109 | width: 100%; 110 | margin-top: 10.2rem; 111 | margin-bottom: 10.2rem; } 112 | @media screen and (max-width: 767px) { 113 | .picker > .container .popup .list-wrap ul { 114 | margin-top: 6.8rem; 115 | margin-bottom: 13.6rem; } } 116 | .picker > .container .popup .list-wrap li { 117 | text-align: center; 118 | line-height: 3.4rem; 119 | font-size: 1.32rem; 120 | cursor: pointer; } 121 | @media screen and (min-width: 768px) { 122 | .picker > .container .popup .list-wrap li:hover { 123 | background-color: rgba(255, 210, 96, 0.33); } } 124 | .picker > .container .popup > .cover { 125 | position: absolute; 126 | left: 0; 127 | right: 0; 128 | height: 10.2rem; 129 | box-sizing: border-box; 130 | z-index: 12; 131 | pointer-events: none; } 132 | .picker > .container .popup > .cover.upper { 133 | top: 0; } 134 | @media screen and (max-width: 767px) { 135 | .picker > .container .popup > .cover.upper { 136 | height: 6.8rem; } } 137 | .picker > .container .popup > .cover.lower { 138 | bottom: 0; } 139 | @media screen and (max-width: 767px) { 140 | .picker > .container .popup > .cover.lower { 141 | height: 13.6rem; } } 142 | .picker > .container .popup.light { 143 | color: #666; 144 | background-color: rgba(255, 255, 255, 0.96); } 145 | @media screen and (max-width: 767px) { 146 | .picker > .container .popup.light { 147 | border-top: 1px solid #ccc; 148 | box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.08); } } 149 | @media screen and (min-width: 768px) { 150 | .picker > .container .popup.light { 151 | border: 1px solid #ccc; 152 | box-shadow: 0 1px 5px #ddd; } } 153 | .picker > .container .popup.light > .cover { 154 | background-color: rgba(240, 240, 240, 0.7); } 155 | .picker > .container .popup.light > .cover.upper { 156 | border-bottom: 1px solid #ccc; } 157 | .picker > .container .popup.light > .cover.lower { 158 | border-top: 1px solid #ccc; } 159 | .picker > .container .popup.dark { 160 | color: #fff; 161 | background-color: rgba(50, 50, 50, 0.96); } 162 | .picker > .container .popup.dark > .cover { 163 | background-color: rgba(50, 50, 50, 0.72); } 164 | .picker > .container .popup.dark > .cover.upper { 165 | border-bottom: 1px solid rgba(85, 85, 85, 0.9); } 166 | .picker > .container .popup.dark > .cover.lower { 167 | border-top: 1px solid rgba(85, 85, 85, 0.9); } 168 | -------------------------------------------------------------------------------- /examples/demo.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @font-face { 3 | font-family: "icomoon"; 4 | font-style: normal; 5 | font-weight: normal; 6 | src: url("../icons/fonts/icomoon.eot?#iefix") format("embedded-opentype"), url("../icons/fonts/icomoon.woff") format("woff"), url("../icons/fonts/icomoon.ttf") format("truetype"), url("../icons/fonts/icomoon.svg#icomoon") format("svg"); } 7 | 8 | * { 9 | margin: 0; 10 | padding: 0; } 11 | 12 | html, body { 13 | margin: 0; 14 | padding: 0; 15 | height: 100%; 16 | color: #2e2e2e; 17 | font-size: 12px; 18 | font-family: Tahoma,sans-serif,Arial; } 19 | @media screen and (min-width: 240px) { 20 | html, body { 21 | font-size: 9.6px; } } 22 | @media screen and (min-width: 480px) { 23 | html, body { 24 | font-size: 11.273px; } } 25 | @media screen and (min-width: 768px) { 26 | html, body { 27 | font-size: 12px; } } 28 | @media screen and (min-width: 1280px) { 29 | html, body { 30 | font-size: 12.4px; } } 31 | @media screen and (min-width: 1440px) { 32 | html, body { 33 | font-size: 13.1px; } } 34 | @media screen and (min-width: 1920px) { 35 | html, body { 36 | font-size: 14.18px; } } 37 | 38 | body { 39 | -webkit-backface-visibility: hidden; 40 | backface-visibility: hidden; } 41 | 42 | form { 43 | margin: 0; 44 | padding: 0; } 45 | 46 | a:link, a:visited, a:hover { 47 | text-decoration: none; } 48 | 49 | ul, li { 50 | list-style-type: none; 51 | margin: 0; 52 | padding: 0; } 53 | 54 | .picker { 55 | position: relative; } 56 | .picker > .container { 57 | position: relative; 58 | box-sizing: border-box; 59 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 60 | z-index: 100; 61 | top: 1px; 62 | left: -10000px; 63 | -webkit-transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms; 64 | -moz-transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms; 65 | transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms; } 66 | @media screen and (max-width: 767px) { 67 | .picker > .container { 68 | position: fixed; 69 | top: 0; 70 | left: -10000px; 71 | width: 100%; 72 | height: 100%; } } 73 | .picker > .container.table { 74 | display: table; } 75 | .picker > .container.show { 76 | left: 0; 77 | -webkit-transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; 78 | -moz-transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; 79 | transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; } 80 | .picker > .container.show .overlay { 81 | left: 0; } 82 | .picker > .container .overlay { 83 | position: fixed; 84 | height: 100%; 85 | width: 100%; 86 | z-index: 9; 87 | top: 0; 88 | left: -10000px; 89 | opacity: 1; 90 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 91 | will-change: opacity; 92 | -webkit-transform: translateZ(0); 93 | -moz-transform: translateZ(0); 94 | -ms-transform: translateZ(0); 95 | -o-transform: translateZ(0); 96 | transform: translateZ(0); 97 | -webkit-transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, opacity 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; 98 | -moz-transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, opacity 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; 99 | transition: left 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, opacity 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; } 100 | @media screen and (max-width: 767px) { 101 | .picker > .container .overlay { 102 | background-color: rgba(0, 0, 0, 0.25); } } 103 | .picker > .container .cell { 104 | display: table-cell; 105 | box-sizing: border-box; 106 | width: 100%; 107 | height: 100%; } 108 | .picker > .container .popup { 109 | position: absolute; 110 | box-sizing: border-box; 111 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 112 | -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1); 113 | -moz-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1); 114 | transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1); 115 | margin: 0 auto; 116 | z-index: 10; 117 | font-size: 1.2rem; 118 | opacity: 0; } 119 | @media screen and (max-width: 767px) { 120 | .picker > .container .popup { 121 | bottom: 0; 122 | width: 100%; 123 | max-width: 100%; 124 | height: 23.8rem; 125 | -webkit-transform: translate3d(0, 23.8rem, 0); 126 | -moz-transform: translate3d(0, 23.8rem, 0); 127 | -ms-transform: translate3d(0, 23.8rem, 0); 128 | -o-transform: translate3d(0, 23.8rem, 0); 129 | transform: translate3d(0, 23.8rem, 0); } } 130 | @media screen and (min-width: 768px) { 131 | .picker > .container .popup { 132 | height: 23.8rem; 133 | width: 20rem; 134 | -webkit-transform: translate3d(0, -64px, 0); 135 | -moz-transform: translate3d(0, -64px, 0); 136 | -ms-transform: translate3d(0, -64px, 0); 137 | -o-transform: translate3d(0, -64px, 0); 138 | transform: translate3d(0, -64px, 0); } } 139 | .picker > .container .popup.show { 140 | opacity: 1; 141 | -webkit-transform: translate3d(0, 0, 0); 142 | -moz-transform: translate3d(0, 0, 0); 143 | -ms-transform: translate3d(0, 0, 0); 144 | -o-transform: translate3d(0, 0, 0); 145 | transform: translate3d(0, 0, 0); } 146 | .picker > .container .popup:after { 147 | content: ' '; 148 | clear: both; 149 | display: table; } 150 | .picker > .container .popup .list-wrap { 151 | float: left; 152 | width: 100%; 153 | height: 100%; 154 | overflow-x: hidden; 155 | overflow-y: auto; } 156 | .picker > .container .popup .list-wrap ul, .picker > .container .popup .list-wrap li { 157 | list-style-type: none; 158 | margin: 0; 159 | padding: 0; } 160 | .picker > .container .popup .list-wrap ul { 161 | display: block; 162 | width: 100%; 163 | margin-top: 10.2rem; 164 | margin-bottom: 10.2rem; } 165 | @media screen and (max-width: 767px) { 166 | .picker > .container .popup .list-wrap ul { 167 | margin-top: 6.8rem; 168 | margin-bottom: 13.6rem; } } 169 | .picker > .container .popup .list-wrap li { 170 | text-align: center; 171 | line-height: 3.4rem; 172 | font-size: 1.32rem; 173 | cursor: pointer; } 174 | @media screen and (min-width: 768px) { 175 | .picker > .container .popup .list-wrap li:hover { 176 | background-color: rgba(255, 210, 96, 0.33); } } 177 | .picker > .container .popup > .cover { 178 | position: absolute; 179 | left: 0; 180 | right: 0; 181 | height: 10.2rem; 182 | box-sizing: border-box; 183 | z-index: 12; 184 | pointer-events: none; } 185 | .picker > .container .popup > .cover.upper { 186 | top: 0; } 187 | @media screen and (max-width: 767px) { 188 | .picker > .container .popup > .cover.upper { 189 | height: 6.8rem; } } 190 | .picker > .container .popup > .cover.lower { 191 | bottom: 0; } 192 | @media screen and (max-width: 767px) { 193 | .picker > .container .popup > .cover.lower { 194 | height: 13.6rem; } } 195 | .picker > .container .popup.light { 196 | color: #666; 197 | background-color: rgba(255, 255, 255, 0.96); } 198 | @media screen and (max-width: 767px) { 199 | .picker > .container .popup.light { 200 | border-top: 1px solid #ccc; 201 | box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.08); } } 202 | @media screen and (min-width: 768px) { 203 | .picker > .container .popup.light { 204 | border: 1px solid #ccc; 205 | box-shadow: 0 1px 5px #ddd; } } 206 | .picker > .container .popup.light > .cover { 207 | background-color: rgba(240, 240, 240, 0.7); } 208 | .picker > .container .popup.light > .cover.upper { 209 | border-bottom: 1px solid #ccc; } 210 | .picker > .container .popup.light > .cover.lower { 211 | border-top: 1px solid #ccc; } 212 | .picker > .container .popup.dark { 213 | color: #fff; 214 | background-color: rgba(50, 50, 50, 0.96); } 215 | .picker > .container .popup.dark > .cover { 216 | background-color: rgba(50, 50, 50, 0.72); } 217 | .picker > .container .popup.dark > .cover.upper { 218 | border-bottom: 1px solid rgba(85, 85, 85, 0.9); } 219 | .picker > .container .popup.dark > .cover.lower { 220 | border-top: 1px solid rgba(85, 85, 85, 0.9); } 221 | 222 | .picker > .box { 223 | cursor: pointer; } 224 | @media screen and (max-width: 767px) { 225 | .picker > .box { 226 | box-sizing: border-box; 227 | line-height: 5rem; 228 | font-size: 1.32rem; 229 | color: #777777; } 230 | .picker > .box:after { 231 | content: ""; 232 | speak: none; 233 | font-style: normal; 234 | font-weight: normal; 235 | font-family: "icomoon"; 236 | -webkit-font-smoothing: antialiased; 237 | -webkit-text-stroke-width: 0.2px; 238 | font-size: 1.6rem; 239 | color: #bbb; 240 | margin-right: 0.6em; 241 | float: right; 242 | line-height: 5rem; } } 243 | @media screen and (min-width: 768px) { 244 | .picker > .box { 245 | border: 1px solid #e0e0e0; 246 | background-color: #f6f6f6; 247 | padding-left: 0.9rem; 248 | box-sizing: border-box; 249 | line-height: 3.2rem; 250 | font-size: 1.3rem; 251 | color: #525252; } 252 | .picker > .box:after { 253 | content: ""; 254 | speak: none; 255 | font-style: normal; 256 | font-weight: normal; 257 | font-family: "icomoon"; 258 | -webkit-font-smoothing: antialiased; 259 | -webkit-text-stroke-width: 0.2px; 260 | font-size: 2.2rem; 261 | color: #888; 262 | line-height: 3.2rem; 263 | text-align: center; 264 | padding: 0 0.6rem; 265 | float: right; 266 | background-color: #eaeaea; 267 | border-left: 1px solid #e0e0e0; } 268 | .picker > .box > label { 269 | font-size: 1.3rem; 270 | color: #525252; } } 271 | 272 | .list-area { 273 | margin-top: 5rem; } 274 | @media screen and (min-width: 768px) { 275 | .list-area { 276 | width: 500px; 277 | margin-left: auto; 278 | margin-right: auto; } } 279 | @media screen and (max-width: 767px) { 280 | .list-area > ul { 281 | border-bottom: 1px solid #e8e8e8; } 282 | .list-area > ul > li { 283 | position: relative; 284 | background-color: #fff; 285 | border-top: 1px solid #e8e8e8; 286 | padding: 0 1.6rem; } 287 | .list-area > ul > li:after { 288 | content: ' '; 289 | clear: both; 290 | display: table; } 291 | .list-area > ul > li > label { 292 | position: absolute; 293 | top: 0; 294 | left: 1.6rem; 295 | display: block; 296 | font-size: 1.32rem; 297 | line-height: 5rem; 298 | width: 7rem; 299 | color: #440f24; } 300 | .list-area > ul > li .edit { 301 | margin-left: 7rem; } } 302 | @media screen and (min-width: 768px) { 303 | .list-area > ul { 304 | padding: 1.8rem; } 305 | .list-area > ul > li { 306 | padding: 0.5rem 0; 307 | font-size: 1.3rem; } 308 | .list-area > ul > li:after { 309 | content: ' '; 310 | clear: both; 311 | display: table; } 312 | .list-area > ul > li > label { 313 | float: left; 314 | display: block; 315 | width: 6rem; 316 | margin-right: 1rem; 317 | padding: 1px; 318 | color: #898989; 319 | line-height: 3.2rem; } 320 | .list-area > ul > li .edit { 321 | margin-left: 7rem; 322 | padding: 1px; 323 | height: 3.3rem; } } 324 | -------------------------------------------------------------------------------- /examples/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React Picker Demo 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /examples/demo.jsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | import React, { Component } from 'react' 4 | import PropTypes from 'prop-types' 5 | import ReactDOM from 'react-dom' 6 | import DocReady from 'es6-docready' 7 | import Dom from 'es6-dom' 8 | import Picker from 'picker' 9 | 10 | 11 | 12 | 13 | DocReady(function() { 14 | 15 | class OptionBox extends Component { 16 | constructor(props, context) { 17 | super(props, context) 18 | 19 | this.state = { 20 | value: this.props.value || 'N/A' 21 | } 22 | 23 | this._handleClick = this._handleClick.bind(this) 24 | } 25 | 26 | componentWillReceiveProps(nextProps){ 27 | this.setState({ 28 | value: nextProps.value || 'N/A' 29 | }) 30 | } 31 | 32 | render() { 33 | 34 | return ( 35 |
36 | 37 |
38 | ) 39 | } 40 | 41 | _handleClick(e) { 42 | this.props.onClick && this.props.onClick(e) 43 | } 44 | } 45 | 46 | 47 | OptionBox.propTypes = { 48 | value: PropTypes.string 49 | , onClick: PropTypes.func 50 | } 51 | OptionBox.defaultProps = {} 52 | 53 | 54 | 55 | 56 | const Fruits = ['Mango', 'Orange', 'Avocado', 'Pineapple', 'Jack Fruit', 'Durian', 'Apricot', 'Carambola', 'Dateplum Persimmon', 'Megranate'] 57 | const Fruits2 = [ 58 | { text: 'Watermelon', value: '' }, 59 | { text: 'Banana', value: 'Banana' }, 60 | { text: 'Lichi', value: 'Lichi' }, 61 | ] 62 | const FruitOptions = Fruits 63 | const defaultFruit = 'Avocado' 64 | 65 | 66 | const Cars = [ 67 | { 68 | text: 'ASTON MARTIN' 69 | , value: '1001' 70 | , series: [ 71 | { 72 | text: 'Cygnet' 73 | , value: '100101' 74 | } 75 | , { 76 | text: 'V8 Vantage' 77 | , value: '100102' 78 | } 79 | , { 80 | text: 'V12 Vantage' 81 | , value: '100103' 82 | } 83 | , { 84 | text: 'DB9' 85 | , value: '100104' 86 | } 87 | , { 88 | text: 'DBS' 89 | , value: '100105' 90 | } 91 | , { 92 | text: 'Virage' 93 | , value: '100106' 94 | } 95 | ] 96 | } 97 | , { 98 | text: 'AUDI' 99 | , value: '1002' 100 | , series: [ 101 | { 102 | text: 'A4 Allroad' 103 | , value: '100201' 104 | } 105 | , { 106 | text: 'A5' 107 | , value: '100202' 108 | } 109 | , { 110 | text: 'A6' 111 | , value: '100203' 112 | } 113 | , { 114 | text: 'A7' 115 | , value: '100204' 116 | } 117 | , { 118 | text: 'A8L' 119 | , value: '100205' 120 | } 121 | , { 122 | text: 'Q3' 123 | , value: '100206' 124 | } 125 | , { 126 | text: 'Q5' 127 | , value: '100207' 128 | } 129 | , { 130 | text: 'Q7' 131 | , value: '100208' 132 | } 133 | ] 134 | } 135 | , { 136 | text: 'PORSCHE' 137 | , value: '1003' 138 | , series: [ 139 | { 140 | text: 'Boxster' 141 | , value: '100301' 142 | } 143 | , { 144 | text: 'Cayman' 145 | , value: '100302' 146 | } 147 | , { 148 | text: '911' 149 | , value: '100303' 150 | } 151 | , { 152 | text: '918' 153 | , value: '100304' 154 | } 155 | , { 156 | text: 'Panamera' 157 | , value: '100305' 158 | } 159 | , { 160 | text: 'Macan' 161 | , value: '100306' 162 | } 163 | ] 164 | } 165 | ] 166 | 167 | 168 | 169 | class List extends Component { 170 | constructor(props, context) { 171 | super(props, context) 172 | 173 | this.state = { 174 | fruit: this.props.fruit 175 | , brand: this.props.brand 176 | , serial: this.props.serial 177 | , fruits: FruitOptions 178 | , brands: Cars 179 | , series: this.getCarSeries(this.props.brand) 180 | } 181 | 182 | this._handleClickFruit = this._handleClickFruit.bind(this) 183 | this._handleFruitChange = this._handleFruitChange.bind(this) 184 | this._handleClickCar = this._handleClickCar.bind(this) 185 | this._handleCarChange = this._handleCarChange.bind(this) 186 | } 187 | 188 | componentWillReceiveProps(nextProps){ 189 | this.setState({ 190 | fruit: nextProps.fruit 191 | , brand: nextProps.brand 192 | , serial: nextProps.serial 193 | }) 194 | } 195 | 196 | componentDidMount () {} 197 | 198 | render() { 199 | 200 | let fruit = this.state.fruit 201 | , brand = this.state.brand 202 | , serial = this.state.serial 203 | 204 | return ( 205 | 235 | ) 236 | } 237 | 238 | _handleClickFruit(e) { 239 | this.refs.fruitSelection.show() 240 | } 241 | 242 | _handleFruitChange(value, text) { 243 | this.setState({fruit: value}) 244 | } 245 | 246 | _handleClickCar(e) { 247 | this.refs.carSelection.show() 248 | } 249 | 250 | _handleCarChange(value, text, listIndex) { 251 | if (listIndex === 0) { 252 | window.clearTimeout( this._updateCarTimer ) 253 | this._updateCarTimer = window.setTimeout( () => { 254 | let series = this.getCarSeries(value) 255 | this.setState({ 256 | series: series 257 | , brand: value 258 | , serial: series.length > 0 ? series[0].value : '' 259 | }) 260 | }, 250) 261 | } 262 | else if (listIndex === 1) { 263 | this.setState({serial: value}) 264 | } 265 | } 266 | 267 | getFruitText(fruit) { 268 | let fruits = this.state.fruits 269 | for (let i = 0; i < fruits.length; i++) { 270 | let o = fruits[i] 271 | if (typeof o === 'string' && o === fruit) 272 | return o 273 | if (o && o.text && o.value === fruit) 274 | return o.text 275 | } 276 | } 277 | 278 | getCarSeries(brand) { 279 | for (let i = 0; i < Cars.length; i++) { 280 | if (Cars[i].value === brand) 281 | return Cars[i].series 282 | } 283 | return [] 284 | } 285 | 286 | getCarText(brand, serial) { 287 | let series, b, s, brands = this.state.brands 288 | for (let i = 0; i < brands.length; i++) { 289 | if (brands[i].value === brand) { 290 | series = brands[i].series 291 | b = brands[i].text 292 | break 293 | } 294 | } 295 | 296 | if ( ! series ) 297 | return 298 | for (let i = 0; i < series.length; i++) { 299 | if (series[i].value === serial) { 300 | s = series[i].text 301 | break 302 | } 303 | } 304 | 305 | return (b && s) ? `${b} - ${s}` : undefined 306 | } 307 | } 308 | 309 | 310 | List.propTypes = { 311 | fruit: PropTypes.string 312 | , brand: PropTypes.string 313 | , serial: PropTypes.string 314 | } 315 | List.defaultProps = { 316 | //brand: Cars[0].value 317 | brand: '1002' 318 | , serial: '100203' 319 | } 320 | 321 | 322 | 323 | 324 | 325 | 326 | class Main extends Component { 327 | constructor(props, context) { 328 | super(props, context) 329 | 330 | this.state = { 331 | value: this.props.value 332 | } 333 | } 334 | 335 | componentWillReceiveProps(nextProps){ 336 | this.setState({ 337 | value: nextProps.value 338 | }) 339 | } 340 | 341 | render() { 342 | 343 | return ( 344 |
345 | 346 |
347 | ) 348 | } 349 | } 350 | 351 | 352 | Main.propTypes = { 353 | value: PropTypes.string 354 | , onClick: PropTypes.func 355 | } 356 | 357 | 358 | 359 | 360 | 361 | ReactDOM.render( 362 |
363 | , Dom.nodeById("page-container")) 364 | 365 | 366 | }) 367 | -------------------------------------------------------------------------------- /icons/Read Me.txt: -------------------------------------------------------------------------------- 1 | Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures. 2 | 3 | To use the generated font in desktop programs, you can install the TTF font. In order to copy the character associated with each icon, refer to the text box at the bottom right corner of each glyph in demo.html. The character inside this text box may be invisible; but it can still be copied. See this guide for more info: https://icomoon.io/#docs/local-fonts 4 | 5 | You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects. 6 | 7 | You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu → Manage Projects) to retrieve your icon selection. 8 | -------------------------------------------------------------------------------- /icons/demo-files/demo.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | font-family: sans-serif; 5 | font-size: 1em; 6 | line-height: 1.5; 7 | color: #555; 8 | background: #fff; 9 | } 10 | h1 { 11 | font-size: 1.5em; 12 | font-weight: normal; 13 | } 14 | small { 15 | font-size: .66666667em; 16 | } 17 | a { 18 | color: #e74c3c; 19 | text-decoration: none; 20 | } 21 | a:hover, a:focus { 22 | box-shadow: 0 1px #e74c3c; 23 | } 24 | .bshadow0, input { 25 | box-shadow: inset 0 -2px #e7e7e7; 26 | } 27 | input:hover { 28 | box-shadow: inset 0 -2px #ccc; 29 | } 30 | input, fieldset { 31 | font-size: 1em; 32 | margin: 0; 33 | padding: 0; 34 | border: 0; 35 | } 36 | input { 37 | color: inherit; 38 | line-height: 1.5; 39 | height: 1.5em; 40 | padding: .25em 0; 41 | } 42 | input:focus { 43 | outline: none; 44 | box-shadow: inset 0 -2px #449fdb; 45 | } 46 | .glyph { 47 | font-size: 16px; 48 | width: 15em; 49 | padding-bottom: 1em; 50 | margin-right: 4em; 51 | margin-bottom: 1em; 52 | float: left; 53 | overflow: hidden; 54 | } 55 | .liga { 56 | width: 80%; 57 | width: calc(100% - 2.5em); 58 | } 59 | .talign-right { 60 | text-align: right; 61 | } 62 | .talign-center { 63 | text-align: center; 64 | } 65 | .bgc1 { 66 | background: #f1f1f1; 67 | } 68 | .fgc1 { 69 | color: #999; 70 | } 71 | .fgc0 { 72 | color: #000; 73 | } 74 | p { 75 | margin-top: 1em; 76 | margin-bottom: 1em; 77 | } 78 | .mvm { 79 | margin-top: .75em; 80 | margin-bottom: .75em; 81 | } 82 | .mtn { 83 | margin-top: 0; 84 | } 85 | .mtl, .mal { 86 | margin-top: 1.5em; 87 | } 88 | .mbl, .mal { 89 | margin-bottom: 1.5em; 90 | } 91 | .mal, .mhl { 92 | margin-left: 1.5em; 93 | margin-right: 1.5em; 94 | } 95 | .mhmm { 96 | margin-left: 1em; 97 | margin-right: 1em; 98 | } 99 | .mls { 100 | margin-left: .25em; 101 | } 102 | .ptl { 103 | padding-top: 1.5em; 104 | } 105 | .pbs, .pvs { 106 | padding-bottom: .25em; 107 | } 108 | .pvs, .pts { 109 | padding-top: .25em; 110 | } 111 | .unit { 112 | float: left; 113 | } 114 | .unitRight { 115 | float: right; 116 | } 117 | .size1of2 { 118 | width: 50%; 119 | } 120 | .size1of1 { 121 | width: 100%; 122 | } 123 | .clearfix:before, .clearfix:after { 124 | content: " "; 125 | display: table; 126 | } 127 | .clearfix:after { 128 | clear: both; 129 | } 130 | .hidden-true { 131 | display: none; 132 | } 133 | .textbox0 { 134 | width: 3em; 135 | background: #f1f1f1; 136 | padding: .25em .5em; 137 | line-height: 1.5; 138 | height: 1.5em; 139 | } 140 | #testDrive { 141 | display: block; 142 | padding-top: 24px; 143 | line-height: 1.5; 144 | } 145 | .fs0 { 146 | font-size: 16px; 147 | } 148 | .fs1 { 149 | font-size: 24px; 150 | } 151 | .fs2 { 152 | font-size: 20px; 153 | } 154 | -------------------------------------------------------------------------------- /icons/demo-files/demo.js: -------------------------------------------------------------------------------- 1 | if (!('boxShadow' in document.body.style)) { 2 | document.body.setAttribute('class', 'noBoxShadow'); 3 | } 4 | 5 | document.body.addEventListener("click", function(e) { 6 | var target = e.target; 7 | if (target.tagName === "INPUT" && 8 | target.getAttribute('class').indexOf('liga') === -1) { 9 | target.select(); 10 | } 11 | }); 12 | 13 | (function() { 14 | var fontSize = document.getElementById('fontSize'), 15 | testDrive = document.getElementById('testDrive'), 16 | testText = document.getElementById('testText'); 17 | function updateTest() { 18 | testDrive.innerHTML = testText.value || String.fromCharCode(160); 19 | if (window.icomoonLiga) { 20 | window.icomoonLiga(testDrive); 21 | } 22 | } 23 | function updateSize() { 24 | testDrive.style.fontSize = fontSize.value + 'px'; 25 | } 26 | fontSize.addEventListener('change', updateSize, false); 27 | testText.addEventListener('input', updateTest, false); 28 | testText.addEventListener('change', updateTest, false); 29 | updateSize(); 30 | }()); 31 | -------------------------------------------------------------------------------- /icons/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IcoMoon Demo 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Font Name: icomoon (Glyphs: 19)

13 |
14 |
15 |

Grid Size: 24

16 |
17 |
18 | 19 | 20 | 21 | icon-arrow-back 22 |
23 |
24 | 25 | 26 |
27 |
28 | liga: 29 | 30 |
31 |
32 |
33 |
34 | 35 | 36 | 37 | icon-arrow-drop-down 38 |
39 |
40 | 41 | 42 |
43 |
44 | liga: 45 | 46 |
47 |
48 |
49 |
50 | 51 | 52 | 53 | icon-arrow-drop-down-circle 54 |
55 |
56 | 57 | 58 |
59 |
60 | liga: 61 | 62 |
63 |
64 |
65 |
66 | 67 | 68 | 69 | icon-arrow-drop-up 70 |
71 |
72 | 73 | 74 |
75 |
76 | liga: 77 | 78 |
79 |
80 |
81 |
82 | 83 | 84 | 85 | icon-arrow-forward 86 |
87 |
88 | 89 | 90 |
91 |
92 | liga: 93 | 94 |
95 |
96 |
97 |
98 | 99 | 100 | 101 | icon-chevron-left 102 |
103 |
104 | 105 | 106 |
107 |
108 | liga: 109 | 110 |
111 |
112 |
113 |
114 | 115 | 116 | 117 | icon-chevron-right 118 |
119 |
120 | 121 | 122 |
123 |
124 | liga: 125 | 126 |
127 |
128 |
129 |
130 | 131 | 132 | 133 | icon-close 134 |
135 |
136 | 137 | 138 |
139 |
140 | liga: 141 | 142 |
143 |
144 |
145 |
146 | 147 | 148 | 149 | icon-expand-less 150 |
151 |
152 | 153 | 154 |
155 |
156 | liga: 157 | 158 |
159 |
160 |
161 |
162 | 163 | 164 | 165 | icon-expand-more 166 |
167 |
168 | 169 | 170 |
171 |
172 | liga: 173 | 174 |
175 |
176 |
177 |
178 | 179 | 180 | 181 | icon-unfold-more 182 |
183 |
184 | 185 | 186 |
187 |
188 | liga: 189 | 190 |
191 |
192 |
193 |
194 |

Grid Size: 20

195 |
196 |
197 | 198 | 199 | 200 | icon-chevron-thin-down 201 |
202 |
203 | 204 | 205 |
206 |
207 | liga: 208 | 209 |
210 |
211 |
212 |
213 | 214 | 215 | 216 | icon-chevron-thin-left 217 |
218 |
219 | 220 | 221 |
222 |
223 | liga: 224 | 225 |
226 |
227 |
228 |
229 | 230 | 231 | 232 | icon-chevron-thin-right 233 |
234 |
235 | 236 | 237 |
238 |
239 | liga: 240 | 241 |
242 |
243 |
244 |
245 | 246 | 247 | 248 | icon-chevron-thin-up 249 |
250 |
251 | 252 | 253 |
254 |
255 | liga: 256 | 257 |
258 |
259 |
260 |
261 | 262 | 263 | 264 | icon-chevron-with-circle-down 265 |
266 |
267 | 268 | 269 |
270 |
271 | liga: 272 | 273 |
274 |
275 |
276 |
277 | 278 | 279 | 280 | icon-chevron-with-circle-left 281 |
282 |
283 | 284 | 285 |
286 |
287 | liga: 288 | 289 |
290 |
291 |
292 |
293 | 294 | 295 | 296 | icon-chevron-with-circle-right 297 |
298 |
299 | 300 | 301 |
302 |
303 | liga: 304 | 305 |
306 |
307 |
308 |
309 | 310 | 311 | 312 | icon-chevron-with-circle-up 313 |
314 |
315 | 316 | 317 |
318 |
319 | liga: 320 | 321 |
322 |
323 |
324 | 325 | 326 |
327 |

Font Test Drive

328 | 333 | 335 | 336 |
  337 |
338 |
339 | 340 |
341 |

Generated by IcoMoon

342 |
343 | 344 | 345 | 346 | -------------------------------------------------------------------------------- /icons/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nickeljew/react-picker/b8cc2d7e7e66ecf40dfac18265815038b9d67779/icons/fonts/icomoon.eot -------------------------------------------------------------------------------- /icons/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /icons/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nickeljew/react-picker/b8cc2d7e7e66ecf40dfac18265815038b9d67779/icons/fonts/icomoon.ttf -------------------------------------------------------------------------------- /icons/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nickeljew/react-picker/b8cc2d7e7e66ecf40dfac18265815038b9d67779/icons/fonts/icomoon.woff -------------------------------------------------------------------------------- /icons/selection.json: -------------------------------------------------------------------------------- 1 | { 2 | "IcoMoonType": "selection", 3 | "icons": [ 4 | { 5 | "icon": { 6 | "paths": [ 7 | "M853.333 469.333h-519.253l238.293-238.293-60.373-60.373-341.333 341.333 341.333 341.333 60.373-60.373-238.293-238.293h519.253v-85.333z" 8 | ], 9 | "attrs": [], 10 | "isMulticolor": false, 11 | "tags": [ 12 | "arrow-back" 13 | ], 14 | "grid": 24 15 | }, 16 | "attrs": [], 17 | "properties": { 18 | "id": 672, 19 | "order": 422, 20 | "prevSize": 24, 21 | "code": 58965, 22 | "name": "arrow-back" 23 | }, 24 | "setIdx": 2, 25 | "setId": 9, 26 | "iconIdx": 672 27 | }, 28 | { 29 | "icon": { 30 | "paths": [ 31 | "M298.667 426.667l213.333 213.333 213.333-213.333z" 32 | ], 33 | "attrs": [], 34 | "isMulticolor": false, 35 | "tags": [ 36 | "arrow-drop-down" 37 | ], 38 | "grid": 24 39 | }, 40 | "attrs": [], 41 | "properties": { 42 | "id": 673, 43 | "order": 406, 44 | "prevSize": 24, 45 | "code": 58966, 46 | "name": "arrow-drop-down" 47 | }, 48 | "setIdx": 2, 49 | "setId": 9, 50 | "iconIdx": 673 51 | }, 52 | { 53 | "icon": { 54 | "paths": [ 55 | "M512 85.333c-235.733 0-426.667 190.933-426.667 426.667s190.933 426.667 426.667 426.667 426.667-190.933 426.667-426.667-190.933-426.667-426.667-426.667zM512 597.333l-170.667-170.667h341.333l-170.667 170.667z" 56 | ], 57 | "attrs": [], 58 | "isMulticolor": false, 59 | "tags": [ 60 | "arrow-drop-down-circle" 61 | ], 62 | "grid": 24 63 | }, 64 | "attrs": [], 65 | "properties": { 66 | "id": 674, 67 | "order": 410, 68 | "prevSize": 24, 69 | "code": 58967, 70 | "name": "arrow-drop-down-circle" 71 | }, 72 | "setIdx": 2, 73 | "setId": 9, 74 | "iconIdx": 674 75 | }, 76 | { 77 | "icon": { 78 | "paths": [ 79 | "M298.667 597.333l213.333-213.333 213.333 213.333z" 80 | ], 81 | "attrs": [], 82 | "isMulticolor": false, 83 | "tags": [ 84 | "arrow-drop-up" 85 | ], 86 | "grid": 24 87 | }, 88 | "attrs": [], 89 | "properties": { 90 | "id": 675, 91 | "order": 411, 92 | "prevSize": 24, 93 | "code": 58968, 94 | "name": "arrow-drop-up" 95 | }, 96 | "setIdx": 2, 97 | "setId": 9, 98 | "iconIdx": 675 99 | }, 100 | { 101 | "icon": { 102 | "paths": [ 103 | "M512 170.667l-60.373 60.373 238.293 238.293h-519.253v85.333h519.253l-238.293 238.293 60.373 60.373 341.333-341.333z" 104 | ], 105 | "attrs": [], 106 | "isMulticolor": false, 107 | "tags": [ 108 | "arrow-forward" 109 | ], 110 | "grid": 24 111 | }, 112 | "attrs": [], 113 | "properties": { 114 | "id": 676, 115 | "order": 423, 116 | "prevSize": 24, 117 | "code": 58969, 118 | "name": "arrow-forward" 119 | }, 120 | "setIdx": 2, 121 | "setId": 9, 122 | "iconIdx": 676 123 | }, 124 | { 125 | "icon": { 126 | "paths": [ 127 | "M657.707 316.373l-60.373-60.373-256 256 256 256 60.373-60.373-195.627-195.627z" 128 | ], 129 | "attrs": [], 130 | "isMulticolor": false, 131 | "tags": [ 132 | "chevron-left" 133 | ], 134 | "grid": 24 135 | }, 136 | "attrs": [], 137 | "properties": { 138 | "id": 679, 139 | "order": 421, 140 | "prevSize": 24, 141 | "code": 58971, 142 | "name": "chevron-left" 143 | }, 144 | "setIdx": 2, 145 | "setId": 9, 146 | "iconIdx": 679 147 | }, 148 | { 149 | "icon": { 150 | "paths": [ 151 | "M426.667 256l-60.373 60.373 195.627 195.627-195.627 195.627 60.373 60.373 256-256z" 152 | ], 153 | "attrs": [], 154 | "isMulticolor": false, 155 | "tags": [ 156 | "chevron-right" 157 | ], 158 | "grid": 24 159 | }, 160 | "attrs": [], 161 | "properties": { 162 | "id": 680, 163 | "order": 409, 164 | "prevSize": 24, 165 | "code": 58972, 166 | "name": "chevron-right" 167 | }, 168 | "setIdx": 2, 169 | "setId": 9, 170 | "iconIdx": 680 171 | }, 172 | { 173 | "icon": { 174 | "paths": [ 175 | "M810.667 273.707l-60.373-60.373-238.293 238.293-238.293-238.293-60.373 60.373 238.293 238.293-238.293 238.293 60.373 60.373 238.293-238.293 238.293 238.293 60.373-60.373-238.293-238.293z" 176 | ], 177 | "attrs": [], 178 | "isMulticolor": false, 179 | "tags": [ 180 | "close" 181 | ], 182 | "grid": 24 183 | }, 184 | "attrs": [], 185 | "properties": { 186 | "id": 681, 187 | "order": 408, 188 | "prevSize": 24, 189 | "code": 58973, 190 | "name": "close" 191 | }, 192 | "setIdx": 2, 193 | "setId": 9, 194 | "iconIdx": 681 195 | }, 196 | { 197 | "icon": { 198 | "paths": [ 199 | "M512 341.333l-256 256 60.373 60.373 195.627-195.627 195.627 195.627 60.373-60.373z" 200 | ], 201 | "attrs": [], 202 | "isMulticolor": false, 203 | "tags": [ 204 | "expand-less" 205 | ], 206 | "grid": 24 207 | }, 208 | "attrs": [], 209 | "properties": { 210 | "id": 682, 211 | "order": 412, 212 | "prevSize": 24, 213 | "code": 58974, 214 | "name": "expand-less" 215 | }, 216 | "setIdx": 2, 217 | "setId": 9, 218 | "iconIdx": 682 219 | }, 220 | { 221 | "icon": { 222 | "paths": [ 223 | "M707.627 366.293l-195.627 195.627-195.627-195.627-60.373 60.373 256 256 256-256z" 224 | ], 225 | "attrs": [], 226 | "isMulticolor": false, 227 | "tags": [ 228 | "expand-more" 229 | ], 230 | "grid": 24 231 | }, 232 | "attrs": [], 233 | "properties": { 234 | "id": 683, 235 | "order": 407, 236 | "prevSize": 24, 237 | "code": 58975, 238 | "name": "expand-more" 239 | }, 240 | "setIdx": 2, 241 | "setId": 9, 242 | "iconIdx": 683 243 | }, 244 | { 245 | "icon": { 246 | "paths": [ 247 | "M512 248.747l135.253 135.253 60.373-60.373-195.627-195.627-195.627 195.627 60.373 60.373 135.253-135.253zM512 775.253l-135.253-135.253-60.373 60.373 195.627 195.627 195.627-195.627-60.373-60.373-135.253 135.253z" 248 | ], 249 | "attrs": [], 250 | "isMulticolor": false, 251 | "tags": [ 252 | "unfold-more" 253 | ], 254 | "grid": 24 255 | }, 256 | "attrs": [], 257 | "properties": { 258 | "id": 691, 259 | "order": 405, 260 | "prevSize": 24, 261 | "code": 58981, 262 | "name": "unfold-more" 263 | }, 264 | "setIdx": 2, 265 | "setId": 9, 266 | "iconIdx": 691 267 | }, 268 | { 269 | "icon": { 270 | "paths": [ 271 | "M891.802 312.781c13.926-13.722 36.301-13.722 50.125 0s13.875 35.891 0 49.613l-404.89 400.896c-13.824 13.722-36.198 13.722-50.125 0l-404.89-400.896c-13.824-13.722-13.824-35.891 0-49.613 13.875-13.722 36.301-13.722 50.125 0l379.853 365.619 379.802-365.619z" 272 | ], 273 | "attrs": [], 274 | "isMulticolor": false, 275 | "tags": [ 276 | "chevron-thin-down" 277 | ], 278 | "grid": 20 279 | }, 280 | "attrs": [], 281 | "properties": { 282 | "id": 40, 283 | "order": 416, 284 | "prevSize": 20, 285 | "code": 59009, 286 | "name": "chevron-thin-down" 287 | }, 288 | "setIdx": 3, 289 | "setId": 8, 290 | "iconIdx": 40 291 | }, 292 | { 293 | "icon": { 294 | "paths": [ 295 | "M711.219 891.802c13.722 13.926 13.722 36.301 0 50.125s-35.891 13.875-49.613 0l-400.896-404.89c-13.722-13.824-13.722-36.198 0-50.125l400.896-404.89c13.722-13.824 35.891-13.824 49.613 0 13.722 13.875 13.722 36.301 0 50.125l-365.619 379.853 365.619 379.802z" 296 | ], 297 | "attrs": [], 298 | "isMulticolor": false, 299 | "tags": [ 300 | "chevron-thin-left" 301 | ], 302 | "grid": 20 303 | }, 304 | "attrs": [], 305 | "properties": { 306 | "id": 41, 307 | "order": 415, 308 | "prevSize": 20, 309 | "code": 59010, 310 | "name": "chevron-thin-left" 311 | }, 312 | "setIdx": 3, 313 | "setId": 8, 314 | "iconIdx": 41 315 | }, 316 | { 317 | "icon": { 318 | "paths": [ 319 | "M678.4 512l-365.619-379.904c-13.722-13.824-13.722-36.198 0-50.125 13.722-13.824 35.891-13.824 49.613 0l400.896 404.89c13.722 13.875 13.722 36.301 0 50.125l-400.896 404.89c-13.722 13.875-35.891 13.824-49.613 0-13.722-13.773-13.722-36.198 0-50.125l365.619-379.75z" 320 | ], 321 | "attrs": [], 322 | "isMulticolor": false, 323 | "tags": [ 324 | "chevron-thin-right" 325 | ], 326 | "grid": 20 327 | }, 328 | "attrs": [], 329 | "properties": { 330 | "id": 42, 331 | "order": 413, 332 | "prevSize": 20, 333 | "code": 59011, 334 | "name": "chevron-thin-right" 335 | }, 336 | "setIdx": 3, 337 | "setId": 8, 338 | "iconIdx": 42 339 | }, 340 | { 341 | "icon": { 342 | "paths": [ 343 | "M132.198 711.219c-13.926 13.722-36.301 13.722-50.125 0s-13.875-35.891 0-49.613l404.89-400.896c13.824-13.722 36.198-13.722 50.125 0l404.89 400.896c13.824 13.722 13.824 35.891 0 49.613-13.875 13.722-36.301 13.722-50.074 0l-379.904-365.619-379.802 365.619z" 344 | ], 345 | "attrs": [], 346 | "isMulticolor": false, 347 | "tags": [ 348 | "chevron-thin-up" 349 | ], 350 | "grid": 20 351 | }, 352 | "attrs": [], 353 | "properties": { 354 | "id": 43, 355 | "order": 414, 356 | "prevSize": 20, 357 | "code": 59012, 358 | "name": "chevron-thin-up" 359 | }, 360 | "setIdx": 3, 361 | "setId": 8, 362 | "iconIdx": 43 363 | }, 364 | { 365 | "icon": { 366 | "paths": [ 367 | "M640.256 445.338l-128.256 117.862-128.307-117.862c-10.138-10.035-26.522-10.035-36.762 0-10.086 10.035-10.086 26.368 0 36.352l146.637 143.718c10.189 10.035 26.624 10.035 36.71 0l146.637-143.718c10.189-9.984 10.138-26.317 0-36.352-10.086-10.035-26.47-10.035-36.659 0zM512 20.48c-271.462 0-491.52 220.058-491.52 491.52 0 271.514 220.058 491.52 491.52 491.52s491.52-220.006 491.52-491.52c0-271.462-220.058-491.52-491.52-491.52zM512 939.725c-236.288 0-427.725-191.488-427.725-427.725s191.437-427.725 427.725-427.725c236.186 0 427.725 191.488 427.725 427.725s-191.539 427.725-427.725 427.725z" 368 | ], 369 | "attrs": [], 370 | "isMulticolor": false, 371 | "tags": [ 372 | "chevron-with-circle-down" 373 | ], 374 | "grid": 20 375 | }, 376 | "attrs": [], 377 | "properties": { 378 | "id": 45, 379 | "order": 417, 380 | "prevSize": 20, 381 | "code": 59014, 382 | "name": "chevron-with-circle-down" 383 | }, 384 | "setIdx": 3, 385 | "setId": 8, 386 | "iconIdx": 45 387 | }, 388 | { 389 | "icon": { 390 | "paths": [ 391 | "M578.662 346.931c-10.035-10.086-26.368-10.086-36.352 0l-143.718 146.688c-10.035 10.189-10.035 26.624 0 36.71l143.718 146.637c9.984 10.189 26.317 10.138 36.352 0 10.035-10.086 10.035-26.522 0-36.71l-117.862-128.256 117.862-128.307c10.035-10.138 10.035-26.522 0-36.762zM512 20.48c-271.462 0-491.52 220.058-491.52 491.52 0 271.514 220.058 491.52 491.52 491.52s491.52-220.006 491.52-491.52c0-271.462-220.058-491.52-491.52-491.52zM512 939.725c-236.288 0-427.725-191.488-427.725-427.725s191.437-427.725 427.725-427.725c236.186 0 427.725 191.488 427.725 427.725s-191.539 427.725-427.725 427.725z" 392 | ], 393 | "attrs": [], 394 | "isMulticolor": false, 395 | "tags": [ 396 | "chevron-with-circle-left" 397 | ], 398 | "grid": 20 399 | }, 400 | "attrs": [], 401 | "properties": { 402 | "id": 46, 403 | "order": 418, 404 | "prevSize": 20, 405 | "code": 59015, 406 | "name": "chevron-with-circle-left" 407 | }, 408 | "setIdx": 3, 409 | "setId": 8, 410 | "iconIdx": 46 411 | }, 412 | { 413 | "icon": { 414 | "paths": [ 415 | "M563.2 512l-117.862-128.307c-10.035-10.138-10.035-26.573 0-36.762 10.035-10.086 26.368-10.086 36.352 0l143.718 146.637c10.035 10.189 10.035 26.624 0 36.71l-143.718 146.637c-9.984 10.189-26.317 10.138-36.352 0-10.035-10.086-10.035-26.522 0-36.71l117.862-128.205zM512 20.48c271.462 0 491.52 220.058 491.52 491.52 0 271.514-220.058 491.52-491.52 491.52s-491.52-220.006-491.52-491.52c0-271.462 220.058-491.52 491.52-491.52zM512 939.725c236.186 0 427.725-191.488 427.725-427.725s-191.539-427.725-427.725-427.725c-236.288 0-427.725 191.488-427.725 427.725-0.051 236.237 191.437 427.725 427.725 427.725z" 416 | ], 417 | "attrs": [], 418 | "isMulticolor": false, 419 | "tags": [ 420 | "chevron-with-circle-right" 421 | ], 422 | "grid": 20 423 | }, 424 | "attrs": [], 425 | "properties": { 426 | "id": 47, 427 | "order": 419, 428 | "prevSize": 20, 429 | "code": 59016, 430 | "name": "chevron-with-circle-right" 431 | }, 432 | "setIdx": 3, 433 | "setId": 8, 434 | "iconIdx": 47 435 | }, 436 | { 437 | "icon": { 438 | "paths": [ 439 | "M530.381 398.592c-10.189-10.035-26.624-10.035-36.71 0l-146.637 143.718c-10.189 9.984-10.138 26.317 0 36.352 10.086 10.035 26.522 10.035 36.71 0l128.256-117.862 128.307 117.862c10.138 10.035 26.522 10.035 36.762 0 10.086-10.035 10.086-26.368 0-36.352l-146.688-143.718zM512 20.48c-271.462 0-491.52 220.058-491.52 491.52 0 271.514 220.058 491.52 491.52 491.52s491.52-220.006 491.52-491.52c0-271.462-220.058-491.52-491.52-491.52zM512 939.725c-236.288 0-427.725-191.488-427.725-427.725s191.437-427.725 427.725-427.725c236.186 0 427.725 191.488 427.725 427.725s-191.539 427.725-427.725 427.725z" 440 | ], 441 | "attrs": [], 442 | "isMulticolor": false, 443 | "tags": [ 444 | "chevron-with-circle-up" 445 | ], 446 | "grid": 20 447 | }, 448 | "attrs": [], 449 | "properties": { 450 | "id": 48, 451 | "order": 420, 452 | "prevSize": 20, 453 | "code": 59017, 454 | "name": "chevron-with-circle-up" 455 | }, 456 | "setIdx": 3, 457 | "setId": 8, 458 | "iconIdx": 48 459 | } 460 | ], 461 | "height": 1024, 462 | "metadata": { 463 | "name": "icomoon" 464 | }, 465 | "preferences": { 466 | "showGlyphs": true, 467 | "showQuickUse": true, 468 | "showQuickUse2": true, 469 | "showSVGs": true, 470 | "fontPref": { 471 | "prefix": "icon-", 472 | "metadata": { 473 | "fontFamily": "icomoon" 474 | }, 475 | "metrics": { 476 | "emSize": 1024, 477 | "baseline": 6.25, 478 | "whitespace": 50 479 | }, 480 | "resetPoint": 58880, 481 | "embed": false 482 | }, 483 | "imagePref": { 484 | "prefix": "icon-", 485 | "png": true, 486 | "useClassSelector": true, 487 | "color": 4473924, 488 | "bgColor": 16777215 489 | }, 490 | "historySize": 100, 491 | "showCodes": true 492 | } 493 | } -------------------------------------------------------------------------------- /icons/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src:url('fonts/icomoon.eot?wciw5h'); 4 | src:url('fonts/icomoon.eot?wciw5h#iefix') format('embedded-opentype'), 5 | url('fonts/icomoon.ttf?wciw5h') format('truetype'), 6 | url('fonts/icomoon.woff?wciw5h') format('woff'), 7 | url('fonts/icomoon.svg?wciw5h#icomoon') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [class^="icon-"], [class*=" icon-"] { 13 | font-family: 'icomoon'; 14 | speak: none; 15 | font-style: normal; 16 | font-weight: normal; 17 | font-variant: normal; 18 | text-transform: none; 19 | line-height: 1; 20 | 21 | /* Better Font Rendering =========== */ 22 | -webkit-font-smoothing: antialiased; 23 | -moz-osx-font-smoothing: grayscale; 24 | } 25 | 26 | .icon-arrow-back:before { 27 | content: "\e655"; 28 | } 29 | .icon-arrow-drop-down:before { 30 | content: "\e656"; 31 | } 32 | .icon-arrow-drop-down-circle:before { 33 | content: "\e657"; 34 | } 35 | .icon-arrow-drop-up:before { 36 | content: "\e658"; 37 | } 38 | .icon-arrow-forward:before { 39 | content: "\e659"; 40 | } 41 | .icon-chevron-left:before { 42 | content: "\e65b"; 43 | } 44 | .icon-chevron-right:before { 45 | content: "\e65c"; 46 | } 47 | .icon-close:before { 48 | content: "\e65d"; 49 | } 50 | .icon-expand-less:before { 51 | content: "\e65e"; 52 | } 53 | .icon-expand-more:before { 54 | content: "\e65f"; 55 | } 56 | .icon-unfold-more:before { 57 | content: "\e665"; 58 | } 59 | .icon-chevron-thin-down:before { 60 | content: "\e681"; 61 | } 62 | .icon-chevron-thin-left:before { 63 | content: "\e682"; 64 | } 65 | .icon-chevron-thin-right:before { 66 | content: "\e683"; 67 | } 68 | .icon-chevron-thin-up:before { 69 | content: "\e684"; 70 | } 71 | .icon-chevron-with-circle-down:before { 72 | content: "\e686"; 73 | } 74 | .icon-chevron-with-circle-left:before { 75 | content: "\e687"; 76 | } 77 | .icon-chevron-with-circle-right:before { 78 | content: "\e688"; 79 | } 80 | .icon-chevron-with-circle-up:before { 81 | content: "\e689"; 82 | } 83 | 84 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-picker", 3 | "description": "Picker Component with a popup options list similiar to the picker in iOS", 4 | "url": "https://github.com/nickeljew/react-picker", 5 | "homepage": "https://github.com/nickeljew/react-picker", 6 | "keywords": [ 7 | "react", 8 | "react-component", 9 | "picker", 10 | "chosen", 11 | "select", 12 | "options", 13 | "choices" 14 | ], 15 | "author": "Nickel Jianhui Zhu ", 16 | "version": "1.2.17", 17 | "license": "MIT", 18 | "private": false, 19 | "main": "lib/picker.js", 20 | "style": "css/picker.css", 21 | "scripts": { 22 | "prebuild": "rm -rf lib", 23 | "_build": "grunt build", 24 | "_prepublish": "npm run build" 25 | }, 26 | "babel": { 27 | "plugins": [ 28 | "@babel/plugin-transform-react-jsx" 29 | ], 30 | "presets": [ 31 | "@babel/preset-env", 32 | "@babel/preset-react" 33 | ] 34 | }, 35 | "dependencies": { 36 | "es6-viewpoint": "^0.1.4", 37 | "react-tapper": "^0.1.23" 38 | }, 39 | "peerDependencies": { 40 | "prop-types": "^15.6.0", 41 | "react": "^17.0.2", 42 | "react-dom": "^17.0.2" 43 | }, 44 | "devDependencies": { 45 | "@babel/core": "^7.14.0", 46 | "@babel/plugin-transform-react-jsx": "^7.13.12", 47 | "@babel/preset-env": "^7.14.1", 48 | "@babel/preset-react": "^7.13.13", 49 | "babel-loader": "^8.2.2", 50 | "es6-docready": "^1.0.0", 51 | "es6-dom": "^1.1.2", 52 | "grunt": "^1.4.0", 53 | "grunt-babel": "^8.0.0", 54 | "grunt-contrib-clean": "^2.0.0", 55 | "grunt-contrib-watch": "^1.1.0", 56 | "grunt-sass": "^3.1.0", 57 | "grunt-webpack": "^4.0.3", 58 | "load-grunt-tasks": "^5.1.0", 59 | "node-sass": "^6.0.0", 60 | "webpack": "^5.36.2" 61 | }, 62 | "repository": { 63 | "type": "git", 64 | "url": "https://github.com/nickeljew/react-picker.git" 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /scss/bourbon/_bourbon-deprecated-upcoming.scss: -------------------------------------------------------------------------------- 1 | // The following features have been deprecated and will be removed in the next MAJOR version release 2 | 3 | @mixin inline-block { 4 | display: inline-block; 5 | 6 | @warn "The inline-block mixin is deprecated and will be removed in the next major version release"; 7 | } 8 | 9 | @mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) { 10 | 11 | @if type-of($style) == string and type-of($base-color) == color { 12 | @include buttonstyle($style, $base-color, $text-size, $padding); 13 | } 14 | 15 | @if type-of($style) == string and type-of($base-color) == number { 16 | $padding: $text-size; 17 | $text-size: $base-color; 18 | $base-color: #4294f0; 19 | 20 | @if $padding == inherit { 21 | $padding: 7px 18px; 22 | } 23 | 24 | @include buttonstyle($style, $base-color, $text-size, $padding); 25 | } 26 | 27 | @if type-of($style) == color and type-of($base-color) == color { 28 | $base-color: $style; 29 | $style: simple; 30 | @include buttonstyle($style, $base-color, $text-size, $padding); 31 | } 32 | 33 | @if type-of($style) == color and type-of($base-color) == number { 34 | $padding: $text-size; 35 | $text-size: $base-color; 36 | $base-color: $style; 37 | $style: simple; 38 | 39 | @if $padding == inherit { 40 | $padding: 7px 18px; 41 | } 42 | 43 | @include buttonstyle($style, $base-color, $text-size, $padding); 44 | } 45 | 46 | @if type-of($style) == number { 47 | $padding: $base-color; 48 | $text-size: $style; 49 | $base-color: #4294f0; 50 | $style: simple; 51 | 52 | @if $padding == #4294f0 { 53 | $padding: 7px 18px; 54 | } 55 | 56 | @include buttonstyle($style, $base-color, $text-size, $padding); 57 | } 58 | 59 | &:disabled { 60 | cursor: not-allowed; 61 | opacity: 0.5; 62 | } 63 | 64 | @warn "The button mixin is deprecated and will be removed in the next major version release"; 65 | } 66 | 67 | // Selector Style Button 68 | @mixin buttonstyle($type, $b-color, $t-size, $pad) { 69 | // Grayscale button 70 | @if $type == simple and $b-color == grayscale($b-color) { 71 | @include simple($b-color, true, $t-size, $pad); 72 | } 73 | 74 | @if $type == shiny and $b-color == grayscale($b-color) { 75 | @include shiny($b-color, true, $t-size, $pad); 76 | } 77 | 78 | @if $type == pill and $b-color == grayscale($b-color) { 79 | @include pill($b-color, true, $t-size, $pad); 80 | } 81 | 82 | @if $type == flat and $b-color == grayscale($b-color) { 83 | @include flat($b-color, true, $t-size, $pad); 84 | } 85 | 86 | // Colored button 87 | @if $type == simple { 88 | @include simple($b-color, false, $t-size, $pad); 89 | } 90 | 91 | @else if $type == shiny { 92 | @include shiny($b-color, false, $t-size, $pad); 93 | } 94 | 95 | @else if $type == pill { 96 | @include pill($b-color, false, $t-size, $pad); 97 | } 98 | 99 | @else if $type == flat { 100 | @include flat($b-color, false, $t-size, $pad); 101 | } 102 | } 103 | 104 | // Simple Button 105 | @mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { 106 | $color: hsl(0, 0, 100%); 107 | $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); 108 | $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); 109 | $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%); 110 | $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%); 111 | 112 | @if is-light($base-color) { 113 | $color: hsl(0, 0, 20%); 114 | $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); 115 | } 116 | 117 | @if $grayscale == true { 118 | $border: grayscale($border); 119 | $inset-shadow: grayscale($inset-shadow); 120 | $stop-gradient: grayscale($stop-gradient); 121 | $text-shadow: grayscale($text-shadow); 122 | } 123 | 124 | border: 1px solid $border; 125 | border-radius: 3px; 126 | box-shadow: inset 0 1px 0 0 $inset-shadow; 127 | color: $color; 128 | display: inline-block; 129 | font-size: $textsize; 130 | font-weight: bold; 131 | @include linear-gradient ($base-color, $stop-gradient); 132 | padding: $padding; 133 | text-decoration: none; 134 | text-shadow: 0 1px 0 $text-shadow; 135 | background-clip: padding-box; 136 | 137 | &:hover:not(:disabled) { 138 | $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); 139 | $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); 140 | $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); 141 | 142 | @if $grayscale == true { 143 | $base-color-hover: grayscale($base-color-hover); 144 | $inset-shadow-hover: grayscale($inset-shadow-hover); 145 | $stop-gradient-hover: grayscale($stop-gradient-hover); 146 | } 147 | 148 | @include linear-gradient ($base-color-hover, $stop-gradient-hover); 149 | 150 | box-shadow: inset 0 1px 0 0 $inset-shadow-hover; 151 | cursor: pointer; 152 | } 153 | 154 | &:active:not(:disabled), 155 | &:focus:not(:disabled) { 156 | $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); 157 | $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); 158 | 159 | @if $grayscale == true { 160 | $border-active: grayscale($border-active); 161 | $inset-shadow-active: grayscale($inset-shadow-active); 162 | } 163 | 164 | border: 1px solid $border-active; 165 | box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active; 166 | } 167 | } 168 | 169 | // Shiny Button 170 | @mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { 171 | $color: hsl(0, 0, 100%); 172 | $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81); 173 | $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122); 174 | $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46); 175 | $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12); 176 | $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33); 177 | $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114); 178 | $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48); 179 | 180 | @if is-light($base-color) { 181 | $color: hsl(0, 0, 20%); 182 | $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); 183 | } 184 | 185 | @if $grayscale == true { 186 | $border: grayscale($border); 187 | $border-bottom: grayscale($border-bottom); 188 | $fourth-stop: grayscale($fourth-stop); 189 | $inset-shadow: grayscale($inset-shadow); 190 | $second-stop: grayscale($second-stop); 191 | $text-shadow: grayscale($text-shadow); 192 | $third-stop: grayscale($third-stop); 193 | } 194 | 195 | @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); 196 | 197 | border: 1px solid $border; 198 | border-bottom: 1px solid $border-bottom; 199 | border-radius: 5px; 200 | box-shadow: inset 0 1px 0 0 $inset-shadow; 201 | color: $color; 202 | display: inline-block; 203 | font-size: $textsize; 204 | font-weight: bold; 205 | padding: $padding; 206 | text-align: center; 207 | text-decoration: none; 208 | text-shadow: 0 -1px 1px $text-shadow; 209 | 210 | &:hover:not(:disabled) { 211 | $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18); 212 | $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51); 213 | $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); 214 | $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63); 215 | 216 | @if $grayscale == true { 217 | $first-stop-hover: grayscale($first-stop-hover); 218 | $second-stop-hover: grayscale($second-stop-hover); 219 | $third-stop-hover: grayscale($third-stop-hover); 220 | $fourth-stop-hover: grayscale($fourth-stop-hover); 221 | } 222 | 223 | @include linear-gradient(top, $first-stop-hover 0%, 224 | $second-stop-hover 50%, 225 | $third-stop-hover 50%, 226 | $fourth-stop-hover 100%); 227 | cursor: pointer; 228 | } 229 | 230 | &:active:not(:disabled), 231 | &:focus:not(:disabled) { 232 | $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122); 233 | 234 | @if $grayscale == true { 235 | $inset-shadow-active: grayscale($inset-shadow-active); 236 | } 237 | 238 | box-shadow: inset 0 0 20px 0 $inset-shadow-active; 239 | } 240 | } 241 | 242 | // Pill Button 243 | @mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { 244 | $color: hsl(0, 0, 100%); 245 | $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%); 246 | $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); 247 | $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); 248 | $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%); 249 | $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%); 250 | $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%); 251 | 252 | @if is-light($base-color) { 253 | $color: hsl(0, 0, 20%); 254 | $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); 255 | } 256 | 257 | @if $grayscale == true { 258 | $border-bottom: grayscale($border-bottom); 259 | $border-sides: grayscale($border-sides); 260 | $border-top: grayscale($border-top); 261 | $inset-shadow: grayscale($inset-shadow); 262 | $stop-gradient: grayscale($stop-gradient); 263 | $text-shadow: grayscale($text-shadow); 264 | } 265 | 266 | border: 1px solid $border-top; 267 | border-color: $border-top $border-sides $border-bottom; 268 | border-radius: 16px; 269 | box-shadow: inset 0 1px 0 0 $inset-shadow; 270 | color: $color; 271 | display: inline-block; 272 | font-size: $textsize; 273 | font-weight: normal; 274 | line-height: 1; 275 | @include linear-gradient ($base-color, $stop-gradient); 276 | padding: $padding; 277 | text-align: center; 278 | text-decoration: none; 279 | text-shadow: 0 -1px 1px $text-shadow; 280 | background-clip: padding-box; 281 | 282 | &:hover:not(:disabled) { 283 | $base-color-hover: adjust-color($base-color, $lightness: -4.5%); 284 | $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); 285 | $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); 286 | $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%); 287 | $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%); 288 | $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%); 289 | $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%); 290 | 291 | @if $grayscale == true { 292 | $base-color-hover: grayscale($base-color-hover); 293 | $border-bottom: grayscale($border-bottom); 294 | $border-sides: grayscale($border-sides); 295 | $border-top: grayscale($border-top); 296 | $inset-shadow-hover: grayscale($inset-shadow-hover); 297 | $stop-gradient-hover: grayscale($stop-gradient-hover); 298 | $text-shadow-hover: grayscale($text-shadow-hover); 299 | } 300 | 301 | @include linear-gradient ($base-color-hover, $stop-gradient-hover); 302 | 303 | background-clip: padding-box; 304 | border: 1px solid $border-top; 305 | border-color: $border-top $border-sides $border-bottom; 306 | box-shadow: inset 0 1px 0 0 $inset-shadow-hover; 307 | cursor: pointer; 308 | text-shadow: 0 -1px 1px $text-shadow-hover; 309 | } 310 | 311 | &:active:not(:disabled), 312 | &:focus:not(:disabled) { 313 | $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); 314 | $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); 315 | $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); 316 | $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); 317 | $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%); 318 | 319 | @if $grayscale == true { 320 | $active-color: grayscale($active-color); 321 | $border-active: grayscale($border-active); 322 | $border-bottom-active: grayscale($border-bottom-active); 323 | $inset-shadow-active: grayscale($inset-shadow-active); 324 | $text-shadow-active: grayscale($text-shadow-active); 325 | } 326 | 327 | background: $active-color; 328 | border: 1px solid $border-active; 329 | border-bottom: 1px solid $border-bottom-active; 330 | box-shadow: inset 0 0 6px 3px $inset-shadow-active; 331 | text-shadow: 0 -1px 1px $text-shadow-active; 332 | } 333 | } 334 | 335 | // Flat Button 336 | @mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { 337 | $color: hsl(0, 0, 100%); 338 | 339 | @if is-light($base-color) { 340 | $color: hsl(0, 0, 20%); 341 | } 342 | 343 | background-color: $base-color; 344 | border-radius: 3px; 345 | border: 0; 346 | color: $color; 347 | display: inline-block; 348 | font-size: $textsize; 349 | font-weight: bold; 350 | padding: $padding; 351 | text-decoration: none; 352 | background-clip: padding-box; 353 | 354 | &:hover:not(:disabled){ 355 | $base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%); 356 | 357 | @if $grayscale == true { 358 | $base-color-hover: grayscale($base-color-hover); 359 | } 360 | 361 | background-color: $base-color-hover; 362 | cursor: pointer; 363 | } 364 | 365 | &:active:not(:disabled), 366 | &:focus:not(:disabled) { 367 | $base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%); 368 | 369 | @if $grayscale == true { 370 | $base-color-active: grayscale($base-color-active); 371 | } 372 | 373 | background-color: $base-color-active; 374 | cursor: pointer; 375 | } 376 | } 377 | 378 | // Flexible grid 379 | @function flex-grid($columns, $container-columns: $fg-max-columns) { 380 | $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; 381 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 382 | @return percentage($width / $container-width); 383 | 384 | @warn "The flex-grid function is deprecated and will be removed in the next major version release"; 385 | } 386 | 387 | // Flexible gutter 388 | @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { 389 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 390 | @return percentage($gutter / $container-width); 391 | 392 | @warn "The flex-gutter function is deprecated and will be removed in the next major version release"; 393 | } 394 | 395 | @function grid-width($n) { 396 | @return $n * $gw-column + ($n - 1) * $gw-gutter; 397 | 398 | @warn "The grid-width function is deprecated and will be removed in the next major version release"; 399 | } 400 | 401 | @function golden-ratio($value, $increment) { 402 | @return modular-scale($increment, $value, $ratio: $golden); 403 | 404 | @warn "The golden-ratio function is deprecated and will be removed in the next major version release. Please use the modular-scale function, instead."; 405 | } 406 | 407 | @mixin box-sizing($box) { 408 | @include prefixer(box-sizing, $box, webkit moz spec); 409 | 410 | @warn "The box-sizing mixin is deprecated and will be removed in the next major version release. This property can now be used un-prefixed."; 411 | } 412 | -------------------------------------------------------------------------------- /scss/bourbon/_bourbon.scss: -------------------------------------------------------------------------------- 1 | // Bourbon 4.2.3 2 | // http://bourbon.io 3 | // Copyright 2011-2015 thoughtbot, inc. 4 | // MIT License 5 | 6 | @import "settings/prefixer"; 7 | @import "settings/px-to-em"; 8 | @import "settings/asset-pipeline"; 9 | 10 | @import "functions/assign-inputs"; 11 | @import "functions/contains"; 12 | @import "functions/contains-falsy"; 13 | @import "functions/is-length"; 14 | @import "functions/is-light"; 15 | @import "functions/is-number"; 16 | @import "functions/is-size"; 17 | @import "functions/px-to-em"; 18 | @import "functions/px-to-rem"; 19 | @import "functions/shade"; 20 | @import "functions/strip-units"; 21 | @import "functions/tint"; 22 | @import "functions/transition-property-name"; 23 | @import "functions/unpack"; 24 | @import "functions/modular-scale"; 25 | 26 | @import "helpers/convert-units"; 27 | @import "helpers/directional-values"; 28 | @import "helpers/font-source-declaration"; 29 | @import "helpers/gradient-positions-parser"; 30 | @import "helpers/linear-angle-parser"; 31 | @import "helpers/linear-gradient-parser"; 32 | @import "helpers/linear-positions-parser"; 33 | @import "helpers/linear-side-corner-parser"; 34 | @import "helpers/radial-arg-parser"; 35 | @import "helpers/radial-positions-parser"; 36 | @import "helpers/radial-gradient-parser"; 37 | @import "helpers/render-gradients"; 38 | @import "helpers/shape-size-stripper"; 39 | @import "helpers/str-to-num"; 40 | 41 | @import "css3/animation"; 42 | @import "css3/appearance"; 43 | @import "css3/backface-visibility"; 44 | @import "css3/background"; 45 | @import "css3/background-image"; 46 | @import "css3/border-image"; 47 | @import "css3/calc"; 48 | @import "css3/columns"; 49 | @import "css3/filter"; 50 | @import "css3/flex-box"; 51 | @import "css3/font-face"; 52 | @import "css3/font-feature-settings"; 53 | @import "css3/hidpi-media-query"; 54 | @import "css3/hyphens"; 55 | @import "css3/image-rendering"; 56 | @import "css3/keyframes"; 57 | @import "css3/linear-gradient"; 58 | @import "css3/perspective"; 59 | @import "css3/placeholder"; 60 | @import "css3/radial-gradient"; 61 | @import "css3/selection"; 62 | @import "css3/text-decoration"; 63 | @import "css3/transform"; 64 | @import "css3/transition"; 65 | @import "css3/user-select"; 66 | 67 | @import "addons/border-color"; 68 | @import "addons/border-radius"; 69 | @import "addons/border-style"; 70 | @import "addons/border-width"; 71 | @import "addons/buttons"; 72 | @import "addons/clearfix"; 73 | @import "addons/ellipsis"; 74 | @import "addons/font-stacks"; 75 | @import "addons/hide-text"; 76 | @import "addons/margin"; 77 | @import "addons/padding"; 78 | @import "addons/position"; 79 | @import "addons/prefixer"; 80 | @import "addons/retina-image"; 81 | @import "addons/size"; 82 | @import "addons/text-inputs"; 83 | @import "addons/timing-functions"; 84 | @import "addons/triangle"; 85 | @import "addons/word-wrap"; 86 | 87 | @import "bourbon-deprecated-upcoming"; 88 | -------------------------------------------------------------------------------- /scss/bourbon/addons/_border-color.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a quick method for targeting `border-color` on specific sides of a box. Use a `null` value to “skip” a side. 4 | /// 5 | /// @param {Arglist} $vals 6 | /// List of arguments 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include border-color(#a60b55 #76cd9c null #e8ae1a); 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .element { 15 | /// border-left-color: #e8ae1a; 16 | /// border-right-color: #76cd9c; 17 | /// border-top-color: #a60b55; 18 | /// } 19 | /// 20 | /// @require {mixin} directional-property 21 | /// 22 | /// @output `border-color` 23 | 24 | @mixin border-color($vals...) { 25 | @include directional-property(border, color, $vals...); 26 | } 27 | -------------------------------------------------------------------------------- /scss/bourbon/addons/_border-radius.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a quick method for targeting `border-radius` on both corners on the side of a box. 4 | /// 5 | /// @param {Number} $radii 6 | /// List of arguments 7 | /// 8 | /// @example scss - Usage 9 | /// .element-one { 10 | /// @include border-top-radius(5px); 11 | /// } 12 | /// 13 | /// .element-two { 14 | /// @include border-left-radius(3px); 15 | /// } 16 | /// 17 | /// @example css - CSS Output 18 | /// .element-one { 19 | /// border-top-left-radius: 5px; 20 | /// border-top-right-radius: 5px; 21 | /// } 22 | /// 23 | /// .element-two { 24 | /// border-bottom-left-radius: 3px; 25 | /// border-top-left-radius: 3px; 26 | /// } 27 | /// 28 | /// @output `border-radius` 29 | 30 | @mixin border-top-radius($radii) { 31 | border-top-left-radius: $radii; 32 | border-top-right-radius: $radii; 33 | } 34 | 35 | @mixin border-right-radius($radii) { 36 | border-bottom-right-radius: $radii; 37 | border-top-right-radius: $radii; 38 | } 39 | 40 | @mixin border-bottom-radius($radii) { 41 | border-bottom-left-radius: $radii; 42 | border-bottom-right-radius: $radii; 43 | } 44 | 45 | @mixin border-left-radius($radii) { 46 | border-bottom-left-radius: $radii; 47 | border-top-left-radius: $radii; 48 | } 49 | -------------------------------------------------------------------------------- /scss/bourbon/addons/_border-style.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a quick method for targeting `border-style` on specific sides of a box. Use a `null` value to “skip” a side. 4 | /// 5 | /// @param {Arglist} $vals 6 | /// List of arguments 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include border-style(dashed null solid); 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .element { 15 | /// border-bottom-style: solid; 16 | /// border-top-style: dashed; 17 | /// } 18 | /// 19 | /// @require {mixin} directional-property 20 | /// 21 | /// @output `border-style` 22 | 23 | @mixin border-style($vals...) { 24 | @include directional-property(border, style, $vals...); 25 | } 26 | -------------------------------------------------------------------------------- /scss/bourbon/addons/_border-width.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a quick method for targeting `border-width` on specific sides of a box. Use a `null` value to “skip” a side. 4 | /// 5 | /// @param {Arglist} $vals 6 | /// List of arguments 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include border-width(1em null 20px); 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .element { 15 | /// border-bottom-width: 20px; 16 | /// border-top-width: 1em; 17 | /// } 18 | /// 19 | /// @require {mixin} directional-property 20 | /// 21 | /// @output `border-width` 22 | 23 | @mixin border-width($vals...) { 24 | @include directional-property(border, width, $vals...); 25 | } 26 | -------------------------------------------------------------------------------- /scss/bourbon/addons/_buttons.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Generates variables for all buttons. Please note that you must use interpolation on the variable: `#{$all-buttons}`. 4 | /// 5 | /// @example scss - Usage 6 | /// #{$all-buttons} { 7 | /// background-color: #f00; 8 | /// } 9 | /// 10 | /// #{$all-buttons-focus}, 11 | /// #{$all-buttons-hover} { 12 | /// background-color: #0f0; 13 | /// } 14 | /// 15 | /// #{$all-buttons-active} { 16 | /// background-color: #00f; 17 | /// } 18 | /// 19 | /// @example css - CSS Output 20 | /// button, 21 | /// input[type="button"], 22 | /// input[type="reset"], 23 | /// input[type="submit"] { 24 | /// background-color: #f00; 25 | /// } 26 | /// 27 | /// button:focus, 28 | /// input[type="button"]:focus, 29 | /// input[type="reset"]:focus, 30 | /// input[type="submit"]:focus, 31 | /// button:hover, 32 | /// input[type="button"]:hover, 33 | /// input[type="reset"]:hover, 34 | /// input[type="submit"]:hover { 35 | /// background-color: #0f0; 36 | /// } 37 | /// 38 | /// button:active, 39 | /// input[type="button"]:active, 40 | /// input[type="reset"]:active, 41 | /// input[type="submit"]:active { 42 | /// background-color: #00f; 43 | /// } 44 | /// 45 | /// @require assign-inputs 46 | /// 47 | /// @type List 48 | /// 49 | /// @todo Remove double assigned variables (Lines 59–62) in v5.0.0 50 | 51 | $buttons-list: 'button', 52 | 'input[type="button"]', 53 | 'input[type="reset"]', 54 | 'input[type="submit"]'; 55 | 56 | $all-buttons: assign-inputs($buttons-list); 57 | $all-buttons-active: assign-inputs($buttons-list, active); 58 | $all-buttons-focus: assign-inputs($buttons-list, focus); 59 | $all-buttons-hover: assign-inputs($buttons-list, hover); 60 | 61 | $all-button-inputs: $all-buttons; 62 | $all-button-inputs-active: $all-buttons-active; 63 | $all-button-inputs-focus: $all-buttons-focus; 64 | $all-button-inputs-hover: $all-buttons-hover; 65 | -------------------------------------------------------------------------------- /scss/bourbon/addons/_clearfix.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides an easy way to include a clearfix for containing floats. 4 | /// 5 | /// @link http://cssmojo.com/latest_new_clearfix_so_far/ 6 | /// 7 | /// @example scss - Usage 8 | /// .element { 9 | /// @include clearfix; 10 | /// } 11 | /// 12 | /// @example css - CSS Output 13 | /// .element::after { 14 | /// clear: both; 15 | /// content: ""; 16 | /// display: table; 17 | /// } 18 | 19 | @mixin clearfix { 20 | &::after { 21 | clear: both; 22 | content: ""; 23 | display: table; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /scss/bourbon/addons/_ellipsis.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Truncates text and adds an ellipsis to represent overflow. 4 | /// 5 | /// @param {Number} $width [100%] 6 | /// Max-width for the string to respect before being truncated 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include ellipsis; 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .element { 15 | /// display: inline-block; 16 | /// max-width: 100%; 17 | /// overflow: hidden; 18 | /// text-overflow: ellipsis; 19 | /// white-space: nowrap; 20 | /// word-wrap: normal; 21 | /// } 22 | 23 | @mixin ellipsis($width: 100%) { 24 | display: inline-block; 25 | max-width: $width; 26 | overflow: hidden; 27 | text-overflow: ellipsis; 28 | white-space: nowrap; 29 | word-wrap: normal; 30 | } 31 | -------------------------------------------------------------------------------- /scss/bourbon/addons/_font-stacks.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Georgia font stack. 4 | /// 5 | /// @type List 6 | 7 | $georgia: "Georgia", "Cambria", "Times New Roman", "Times", serif; 8 | 9 | /// Helvetica font stack. 10 | /// 11 | /// @type List 12 | 13 | $helvetica: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; 14 | 15 | /// Lucida Grande font stack. 16 | /// 17 | /// @type List 18 | 19 | $lucida-grande: "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif; 20 | 21 | /// Monospace font stack. 22 | /// 23 | /// @type List 24 | 25 | $monospace: "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace; 26 | 27 | /// Verdana font stack. 28 | /// 29 | /// @type List 30 | 31 | $verdana: "Verdana", "Geneva", sans-serif; 32 | -------------------------------------------------------------------------------- /scss/bourbon/addons/_hide-text.scss: -------------------------------------------------------------------------------- 1 | /// Hides the text in an element, commonly used to show an image. Some elements will need block-level styles applied. 2 | /// 3 | /// @link http://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement 4 | /// 5 | /// @example scss - Usage 6 | /// .element { 7 | /// @include hide-text; 8 | /// } 9 | /// 10 | /// @example css - CSS Output 11 | /// .element { 12 | /// overflow: hidden; 13 | /// text-indent: 101%; 14 | /// white-space: nowrap; 15 | /// } 16 | /// 17 | /// @todo Remove height argument in v5.0.0 18 | 19 | @mixin hide-text($height: null) { 20 | overflow: hidden; 21 | text-indent: 101%; 22 | white-space: nowrap; 23 | 24 | @if $height { 25 | @warn "The `hide-text` mixin has changed and no longer requires a height. The height argument will no longer be accepted in v5.0.0"; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /scss/bourbon/addons/_margin.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a quick method for targeting `margin` on specific sides of a box. Use a `null` value to “skip” a side. 4 | /// 5 | /// @param {Arglist} $vals 6 | /// List of arguments 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include margin(null 10px 3em 20vh); 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .element { 15 | /// margin-bottom: 3em; 16 | /// margin-left: 20vh; 17 | /// margin-right: 10px; 18 | /// } 19 | /// 20 | /// @require {mixin} directional-property 21 | /// 22 | /// @output `margin` 23 | 24 | @mixin margin($vals...) { 25 | @include directional-property(margin, false, $vals...); 26 | } 27 | -------------------------------------------------------------------------------- /scss/bourbon/addons/_padding.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a quick method for targeting `padding` on specific sides of a box. Use a `null` value to “skip” a side. 4 | /// 5 | /// @param {Arglist} $vals 6 | /// List of arguments 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include padding(12vh null 10px 5%); 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .element { 15 | /// padding-bottom: 10px; 16 | /// padding-left: 5%; 17 | /// padding-top: 12vh; 18 | /// } 19 | /// 20 | /// @require {mixin} directional-property 21 | /// 22 | /// @output `padding` 23 | 24 | @mixin padding($vals...) { 25 | @include directional-property(padding, false, $vals...); 26 | } 27 | -------------------------------------------------------------------------------- /scss/bourbon/addons/_position.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a quick method for setting an element’s position. Use a `null` value to “skip” a side. 4 | /// 5 | /// @param {Position} $position [relative] 6 | /// A CSS position value 7 | /// 8 | /// @param {Arglist} $coordinates [null null null null] 9 | /// List of values that correspond to the 4-value syntax for the edges of a box 10 | /// 11 | /// @example scss - Usage 12 | /// .element { 13 | /// @include position(absolute, 0 null null 10em); 14 | /// } 15 | /// 16 | /// @example css - CSS Output 17 | /// .element { 18 | /// left: 10em; 19 | /// position: absolute; 20 | /// top: 0; 21 | /// } 22 | /// 23 | /// @require {function} is-length 24 | /// @require {function} unpack 25 | 26 | @mixin position($position: relative, $coordinates: null null null null) { 27 | @if type-of($position) == list { 28 | $coordinates: $position; 29 | $position: relative; 30 | } 31 | 32 | $coordinates: unpack($coordinates); 33 | 34 | $offsets: ( 35 | top: nth($coordinates, 1), 36 | right: nth($coordinates, 2), 37 | bottom: nth($coordinates, 3), 38 | left: nth($coordinates, 4) 39 | ); 40 | 41 | position: $position; 42 | 43 | @each $offset, $value in $offsets { 44 | @if is-length($value) { 45 | #{$offset}: $value; 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /scss/bourbon/addons/_prefixer.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// A mixin for generating vendor prefixes on non-standardized properties. 4 | /// 5 | /// @param {String} $property 6 | /// Property to prefix 7 | /// 8 | /// @param {*} $value 9 | /// Value to use 10 | /// 11 | /// @param {List} $prefixes 12 | /// Prefixes to define 13 | /// 14 | /// @example scss - Usage 15 | /// .element { 16 | /// @include prefixer(border-radius, 10px, webkit ms spec); 17 | /// } 18 | /// 19 | /// @example css - CSS Output 20 | /// .element { 21 | /// -webkit-border-radius: 10px; 22 | /// -moz-border-radius: 10px; 23 | /// border-radius: 10px; 24 | /// } 25 | /// 26 | /// @require {variable} $prefix-for-webkit 27 | /// @require {variable} $prefix-for-mozilla 28 | /// @require {variable} $prefix-for-microsoft 29 | /// @require {variable} $prefix-for-opera 30 | /// @require {variable} $prefix-for-spec 31 | 32 | @mixin prefixer($property, $value, $prefixes) { 33 | @each $prefix in $prefixes { 34 | @if $prefix == webkit { 35 | @if $prefix-for-webkit { 36 | -webkit-#{$property}: $value; 37 | } 38 | } @else if $prefix == moz { 39 | @if $prefix-for-mozilla { 40 | -moz-#{$property}: $value; 41 | } 42 | } @else if $prefix == ms { 43 | @if $prefix-for-microsoft { 44 | -ms-#{$property}: $value; 45 | } 46 | } @else if $prefix == o { 47 | @if $prefix-for-opera { 48 | -o-#{$property}: $value; 49 | } 50 | } @else if $prefix == spec { 51 | @if $prefix-for-spec { 52 | #{$property}: $value; 53 | } 54 | } @else { 55 | @warn "Unrecognized prefix: #{$prefix}"; 56 | } 57 | } 58 | } 59 | 60 | @mixin disable-prefix-for-all() { 61 | $prefix-for-webkit: false !global; 62 | $prefix-for-mozilla: false !global; 63 | $prefix-for-microsoft: false !global; 64 | $prefix-for-opera: false !global; 65 | $prefix-for-spec: false !global; 66 | } 67 | -------------------------------------------------------------------------------- /scss/bourbon/addons/_retina-image.scss: -------------------------------------------------------------------------------- 1 | @mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) { 2 | @if $asset-pipeline { 3 | background-image: image-url("#{$filename}.#{$extension}"); 4 | } @else { 5 | background-image: url("#{$filename}.#{$extension}"); 6 | } 7 | 8 | @include hidpi { 9 | @if $asset-pipeline { 10 | @if $retina-filename { 11 | background-image: image-url("#{$retina-filename}.#{$extension}"); 12 | } @else { 13 | background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}"); 14 | } 15 | } @else { 16 | @if $retina-filename { 17 | background-image: url("#{$retina-filename}.#{$extension}"); 18 | } @else { 19 | background-image: url("#{$filename}#{$retina-suffix}.#{$extension}"); 20 | } 21 | } 22 | 23 | background-size: $background-size; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /scss/bourbon/addons/_size.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Sets the `width` and `height` of the element. 4 | /// 5 | /// @param {List} $size 6 | /// A list of at most 2 size values. 7 | /// 8 | /// If there is only a single value in `$size` it is used for both width and height. All units are supported. 9 | /// 10 | /// @example scss - Usage 11 | /// .first-element { 12 | /// @include size(2em); 13 | /// } 14 | /// 15 | /// .second-element { 16 | /// @include size(auto 10em); 17 | /// } 18 | /// 19 | /// @example css - CSS Output 20 | /// .first-element { 21 | /// width: 2em; 22 | /// height: 2em; 23 | /// } 24 | /// 25 | /// .second-element { 26 | /// width: auto; 27 | /// height: 10em; 28 | /// } 29 | /// 30 | /// @todo Refactor in 5.0.0 to use a comma-separated argument 31 | 32 | @mixin size($value) { 33 | $width: nth($value, 1); 34 | $height: $width; 35 | 36 | @if length($value) > 1 { 37 | $height: nth($value, 2); 38 | } 39 | 40 | @if is-size($height) { 41 | height: $height; 42 | } @else { 43 | @warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin."; 44 | } 45 | 46 | @if is-size($width) { 47 | width: $width; 48 | } @else { 49 | @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin."; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /scss/bourbon/addons/_text-inputs.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Generates variables for all text-based inputs. Please note that you must use interpolation on the variable: `#{$all-text-inputs}`. 4 | /// 5 | /// @example scss - Usage 6 | /// #{$all-text-inputs} { 7 | /// border: 1px solid #f00; 8 | /// } 9 | /// 10 | /// #{$all-text-inputs-focus}, 11 | /// #{$all-text-inputs-hover} { 12 | /// border: 1px solid #0f0; 13 | /// } 14 | /// 15 | /// #{$all-text-inputs-active} { 16 | /// border: 1px solid #00f; 17 | /// } 18 | /// 19 | /// @example css - CSS Output 20 | /// input[type="color"], 21 | /// input[type="date"], 22 | /// input[type="datetime"], 23 | /// input[type="datetime-local"], 24 | /// input[type="email"], 25 | /// input[type="month"], 26 | /// input[type="number"], 27 | /// input[type="password"], 28 | /// input[type="search"], 29 | /// input[type="tel"], 30 | /// input[type="text"], 31 | /// input[type="time"], 32 | /// input[type="url"], 33 | /// input[type="week"], 34 | /// textarea { 35 | /// border: 1px solid #f00; 36 | /// } 37 | /// 38 | /// input[type="color"]:focus, 39 | /// input[type="date"]:focus, 40 | /// input[type="datetime"]:focus, 41 | /// input[type="datetime-local"]:focus, 42 | /// input[type="email"]:focus, 43 | /// input[type="month"]:focus, 44 | /// input[type="number"]:focus, 45 | /// input[type="password"]:focus, 46 | /// input[type="search"]:focus, 47 | /// input[type="tel"]:focus, 48 | /// input[type="text"]:focus, 49 | /// input[type="time"]:focus, 50 | /// input[type="url"]:focus, 51 | /// input[type="week"]:focus, 52 | /// textarea:focus, 53 | /// input[type="color"]:hover, 54 | /// input[type="date"]:hover, 55 | /// input[type="datetime"]:hover, 56 | /// input[type="datetime-local"]:hover, 57 | /// input[type="email"]:hover, 58 | /// input[type="month"]:hover, 59 | /// input[type="number"]:hover, 60 | /// input[type="password"]:hover, 61 | /// input[type="search"]:hover, 62 | /// input[type="tel"]:hover, 63 | /// input[type="text"]:hover, 64 | /// input[type="time"]:hover, 65 | /// input[type="url"]:hover, 66 | /// input[type="week"]:hover, 67 | /// textarea:hover { 68 | /// border: 1px solid #0f0; 69 | /// } 70 | /// 71 | /// input[type="color"]:active, 72 | /// input[type="date"]:active, 73 | /// input[type="datetime"]:active, 74 | /// input[type="datetime-local"]:active, 75 | /// input[type="email"]:active, 76 | /// input[type="month"]:active, 77 | /// input[type="number"]:active, 78 | /// input[type="password"]:active, 79 | /// input[type="search"]:active, 80 | /// input[type="tel"]:active, 81 | /// input[type="text"]:active, 82 | /// input[type="time"]:active, 83 | /// input[type="url"]:active, 84 | /// input[type="week"]:active, 85 | /// textarea:active { 86 | /// border: 1px solid #00f; 87 | /// } 88 | /// 89 | /// @require assign-inputs 90 | /// 91 | /// @type List 92 | 93 | $text-inputs-list: 'input[type="color"]', 94 | 'input[type="date"]', 95 | 'input[type="datetime"]', 96 | 'input[type="datetime-local"]', 97 | 'input[type="email"]', 98 | 'input[type="month"]', 99 | 'input[type="number"]', 100 | 'input[type="password"]', 101 | 'input[type="search"]', 102 | 'input[type="tel"]', 103 | 'input[type="text"]', 104 | 'input[type="time"]', 105 | 'input[type="url"]', 106 | 'input[type="week"]', 107 | 'textarea'; 108 | 109 | $all-text-inputs: assign-inputs($text-inputs-list); 110 | $all-text-inputs-active: assign-inputs($text-inputs-list, active); 111 | $all-text-inputs-focus: assign-inputs($text-inputs-list, focus); 112 | $all-text-inputs-hover: assign-inputs($text-inputs-list, hover); 113 | -------------------------------------------------------------------------------- /scss/bourbon/addons/_timing-functions.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) 4 | /// 5 | /// Timing functions are the same as demoed here: http://jqueryui.com/resources/demos/effect/easing.html 6 | /// 7 | /// @type cubic-bezier 8 | 9 | $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); 10 | $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); 11 | $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); 12 | $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); 13 | $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); 14 | $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); 15 | $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); 16 | $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); 17 | 18 | $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); 19 | $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); 20 | $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); 21 | $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); 22 | $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); 23 | $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); 24 | $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); 25 | $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); 26 | 27 | $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); 28 | $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); 29 | $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); 30 | $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); 31 | $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); 32 | $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); 33 | $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); 34 | $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); 35 | -------------------------------------------------------------------------------- /scss/bourbon/addons/_triangle.scss: -------------------------------------------------------------------------------- 1 | @mixin triangle($size, $color, $direction) { 2 | $width: nth($size, 1); 3 | $height: nth($size, length($size)); 4 | $foreground-color: nth($color, 1); 5 | $background-color: if(length($color) == 2, nth($color, 2), transparent); 6 | height: 0; 7 | width: 0; 8 | 9 | @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { 10 | $width: $width / 2; 11 | $height: if(length($size) > 1, $height, $height/2); 12 | 13 | @if $direction == up { 14 | border-bottom: $height solid $foreground-color; 15 | border-left: $width solid $background-color; 16 | border-right: $width solid $background-color; 17 | } @else if $direction == right { 18 | border-bottom: $width solid $background-color; 19 | border-left: $height solid $foreground-color; 20 | border-top: $width solid $background-color; 21 | } @else if $direction == down { 22 | border-left: $width solid $background-color; 23 | border-right: $width solid $background-color; 24 | border-top: $height solid $foreground-color; 25 | } @else if $direction == left { 26 | border-bottom: $width solid $background-color; 27 | border-right: $height solid $foreground-color; 28 | border-top: $width solid $background-color; 29 | } 30 | } @else if ($direction == up-right) or ($direction == up-left) { 31 | border-top: $height solid $foreground-color; 32 | 33 | @if $direction == up-right { 34 | border-left: $width solid $background-color; 35 | } @else if $direction == up-left { 36 | border-right: $width solid $background-color; 37 | } 38 | } @else if ($direction == down-right) or ($direction == down-left) { 39 | border-bottom: $height solid $foreground-color; 40 | 41 | @if $direction == down-right { 42 | border-left: $width solid $background-color; 43 | } @else if $direction == down-left { 44 | border-right: $width solid $background-color; 45 | } 46 | } @else if ($direction == inset-up) { 47 | border-color: $background-color $background-color $foreground-color; 48 | border-style: solid; 49 | border-width: $height $width; 50 | } @else if ($direction == inset-down) { 51 | border-color: $foreground-color $background-color $background-color; 52 | border-style: solid; 53 | border-width: $height $width; 54 | } @else if ($direction == inset-right) { 55 | border-color: $background-color $background-color $background-color $foreground-color; 56 | border-style: solid; 57 | border-width: $width $height; 58 | } @else if ($direction == inset-left) { 59 | border-color: $background-color $foreground-color $background-color $background-color; 60 | border-style: solid; 61 | border-width: $width $height; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /scss/bourbon/addons/_word-wrap.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides an easy way to change the `word-wrap` property. 4 | /// 5 | /// @param {String} $wrap [break-word] 6 | /// Value for the `word-break` property. 7 | /// 8 | /// @example scss - Usage 9 | /// .wrapper { 10 | /// @include word-wrap(break-word); 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .wrapper { 15 | /// overflow-wrap: break-word; 16 | /// word-break: break-all; 17 | /// word-wrap: break-word; 18 | /// } 19 | 20 | @mixin word-wrap($wrap: break-word) { 21 | overflow-wrap: $wrap; 22 | word-wrap: $wrap; 23 | 24 | @if $wrap == break-word { 25 | word-break: break-all; 26 | } @else { 27 | word-break: $wrap; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /scss/bourbon/css3/_animation.scss: -------------------------------------------------------------------------------- 1 | // http://www.w3.org/TR/css3-animations/#the-animation-name-property- 2 | // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. 3 | 4 | @mixin animation($animations...) { 5 | @include prefixer(animation, $animations, webkit moz spec); 6 | } 7 | 8 | @mixin animation-name($names...) { 9 | @include prefixer(animation-name, $names, webkit moz spec); 10 | } 11 | 12 | @mixin animation-duration($times...) { 13 | @include prefixer(animation-duration, $times, webkit moz spec); 14 | } 15 | 16 | @mixin animation-timing-function($motions...) { 17 | // ease | linear | ease-in | ease-out | ease-in-out 18 | @include prefixer(animation-timing-function, $motions, webkit moz spec); 19 | } 20 | 21 | @mixin animation-iteration-count($values...) { 22 | // infinite | 23 | @include prefixer(animation-iteration-count, $values, webkit moz spec); 24 | } 25 | 26 | @mixin animation-direction($directions...) { 27 | // normal | alternate 28 | @include prefixer(animation-direction, $directions, webkit moz spec); 29 | } 30 | 31 | @mixin animation-play-state($states...) { 32 | // running | paused 33 | @include prefixer(animation-play-state, $states, webkit moz spec); 34 | } 35 | 36 | @mixin animation-delay($times...) { 37 | @include prefixer(animation-delay, $times, webkit moz spec); 38 | } 39 | 40 | @mixin animation-fill-mode($modes...) { 41 | // none | forwards | backwards | both 42 | @include prefixer(animation-fill-mode, $modes, webkit moz spec); 43 | } 44 | -------------------------------------------------------------------------------- /scss/bourbon/css3/_appearance.scss: -------------------------------------------------------------------------------- 1 | @mixin appearance($value) { 2 | @include prefixer(appearance, $value, webkit moz ms o spec); 3 | } 4 | -------------------------------------------------------------------------------- /scss/bourbon/css3/_backface-visibility.scss: -------------------------------------------------------------------------------- 1 | @mixin backface-visibility($visibility) { 2 | @include prefixer(backface-visibility, $visibility, webkit spec); 3 | } 4 | -------------------------------------------------------------------------------- /scss/bourbon/css3/_background-image.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Background-image property for adding multiple background images with 3 | // gradients, or for stringing multiple gradients together. 4 | //************************************************************************// 5 | 6 | @mixin background-image($images...) { 7 | $webkit-images: (); 8 | $spec-images: (); 9 | 10 | @each $image in $images { 11 | $webkit-image: (); 12 | $spec-image: (); 13 | 14 | @if (type-of($image) == string) { 15 | $url-str: str-slice($image, 0, 3); 16 | $gradient-type: str-slice($image, 0, 6); 17 | 18 | @if $url-str == "url" { 19 | $webkit-image: $image; 20 | $spec-image: $image; 21 | } 22 | 23 | @else if $gradient-type == "linear" { 24 | $gradients: _linear-gradient-parser($image); 25 | $webkit-image: map-get($gradients, webkit-image); 26 | $spec-image: map-get($gradients, spec-image); 27 | } 28 | 29 | @else if $gradient-type == "radial" { 30 | $gradients: _radial-gradient-parser($image); 31 | $webkit-image: map-get($gradients, webkit-image); 32 | $spec-image: map-get($gradients, spec-image); 33 | } 34 | } 35 | 36 | $webkit-images: append($webkit-images, $webkit-image, comma); 37 | $spec-images: append($spec-images, $spec-image, comma); 38 | } 39 | 40 | background-image: $webkit-images; 41 | background-image: $spec-images; 42 | } 43 | -------------------------------------------------------------------------------- /scss/bourbon/css3/_background.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Background property for adding multiple backgrounds using shorthand 3 | // notation. 4 | //************************************************************************// 5 | 6 | @mixin background($backgrounds...) { 7 | $webkit-backgrounds: (); 8 | $spec-backgrounds: (); 9 | 10 | @each $background in $backgrounds { 11 | $webkit-background: (); 12 | $spec-background: (); 13 | $background-type: type-of($background); 14 | 15 | @if $background-type == string or $background-type == list { 16 | $background-str: if($background-type == list, nth($background, 1), $background); 17 | 18 | $url-str: str-slice($background-str, 0, 3); 19 | $gradient-type: str-slice($background-str, 0, 6); 20 | 21 | @if $url-str == "url" { 22 | $webkit-background: $background; 23 | $spec-background: $background; 24 | } 25 | 26 | @else if $gradient-type == "linear" { 27 | $gradients: _linear-gradient-parser("#{$background}"); 28 | $webkit-background: map-get($gradients, webkit-image); 29 | $spec-background: map-get($gradients, spec-image); 30 | } 31 | 32 | @else if $gradient-type == "radial" { 33 | $gradients: _radial-gradient-parser("#{$background}"); 34 | $webkit-background: map-get($gradients, webkit-image); 35 | $spec-background: map-get($gradients, spec-image); 36 | } 37 | 38 | @else { 39 | $webkit-background: $background; 40 | $spec-background: $background; 41 | } 42 | } 43 | 44 | @else { 45 | $webkit-background: $background; 46 | $spec-background: $background; 47 | } 48 | 49 | $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma); 50 | $spec-backgrounds: append($spec-backgrounds, $spec-background, comma); 51 | } 52 | 53 | background: $webkit-backgrounds; 54 | background: $spec-backgrounds; 55 | } 56 | -------------------------------------------------------------------------------- /scss/bourbon/css3/_border-image.scss: -------------------------------------------------------------------------------- 1 | @mixin border-image($borders...) { 2 | $webkit-borders: (); 3 | $spec-borders: (); 4 | 5 | @each $border in $borders { 6 | $webkit-border: (); 7 | $spec-border: (); 8 | $border-type: type-of($border); 9 | 10 | @if $border-type == string or list { 11 | $border-str: if($border-type == list, nth($border, 1), $border); 12 | 13 | $url-str: str-slice($border-str, 0, 3); 14 | $gradient-type: str-slice($border-str, 0, 6); 15 | 16 | @if $url-str == "url" { 17 | $webkit-border: $border; 18 | $spec-border: $border; 19 | } 20 | 21 | @else if $gradient-type == "linear" { 22 | $gradients: _linear-gradient-parser("#{$border}"); 23 | $webkit-border: map-get($gradients, webkit-image); 24 | $spec-border: map-get($gradients, spec-image); 25 | } 26 | 27 | @else if $gradient-type == "radial" { 28 | $gradients: _radial-gradient-parser("#{$border}"); 29 | $webkit-border: map-get($gradients, webkit-image); 30 | $spec-border: map-get($gradients, spec-image); 31 | } 32 | 33 | @else { 34 | $webkit-border: $border; 35 | $spec-border: $border; 36 | } 37 | } 38 | 39 | @else { 40 | $webkit-border: $border; 41 | $spec-border: $border; 42 | } 43 | 44 | $webkit-borders: append($webkit-borders, $webkit-border, comma); 45 | $spec-borders: append($spec-borders, $spec-border, comma); 46 | } 47 | 48 | -webkit-border-image: $webkit-borders; 49 | border-image: $spec-borders; 50 | border-style: solid; 51 | } 52 | 53 | //Examples: 54 | // @include border-image(url("image.png")); 55 | // @include border-image(url("image.png") 20 stretch); 56 | // @include border-image(linear-gradient(45deg, orange, yellow)); 57 | // @include border-image(linear-gradient(45deg, orange, yellow) stretch); 58 | // @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round); 59 | // @include border-image(radial-gradient(top, cover, orange, yellow, orange)); 60 | -------------------------------------------------------------------------------- /scss/bourbon/css3/_calc.scss: -------------------------------------------------------------------------------- 1 | @mixin calc($property, $value) { 2 | #{$property}: -webkit-calc(#{$value}); 3 | #{$property}: calc(#{$value}); 4 | } 5 | -------------------------------------------------------------------------------- /scss/bourbon/css3/_columns.scss: -------------------------------------------------------------------------------- 1 | @mixin columns($arg: auto) { 2 | // || 3 | @include prefixer(columns, $arg, webkit moz spec); 4 | } 5 | 6 | @mixin column-count($int: auto) { 7 | // auto || integer 8 | @include prefixer(column-count, $int, webkit moz spec); 9 | } 10 | 11 | @mixin column-gap($length: normal) { 12 | // normal || length 13 | @include prefixer(column-gap, $length, webkit moz spec); 14 | } 15 | 16 | @mixin column-fill($arg: auto) { 17 | // auto || length 18 | @include prefixer(column-fill, $arg, webkit moz spec); 19 | } 20 | 21 | @mixin column-rule($arg) { 22 | // || || 23 | @include prefixer(column-rule, $arg, webkit moz spec); 24 | } 25 | 26 | @mixin column-rule-color($color) { 27 | @include prefixer(column-rule-color, $color, webkit moz spec); 28 | } 29 | 30 | @mixin column-rule-style($style: none) { 31 | // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid 32 | @include prefixer(column-rule-style, $style, webkit moz spec); 33 | } 34 | 35 | @mixin column-rule-width ($width: none) { 36 | @include prefixer(column-rule-width, $width, webkit moz spec); 37 | } 38 | 39 | @mixin column-span($arg: none) { 40 | // none || all 41 | @include prefixer(column-span, $arg, webkit moz spec); 42 | } 43 | 44 | @mixin column-width($length: auto) { 45 | // auto || length 46 | @include prefixer(column-width, $length, webkit moz spec); 47 | } 48 | -------------------------------------------------------------------------------- /scss/bourbon/css3/_filter.scss: -------------------------------------------------------------------------------- 1 | @mixin filter($function: none) { 2 | // [ 3 | @include prefixer(perspective, $depth, webkit moz spec); 4 | } 5 | 6 | @mixin perspective-origin($value: 50% 50%) { 7 | @include prefixer(perspective-origin, $value, webkit moz spec); 8 | } 9 | -------------------------------------------------------------------------------- /scss/bourbon/css3/_placeholder.scss: -------------------------------------------------------------------------------- 1 | @mixin placeholder { 2 | $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input"; 3 | @each $placeholder in $placeholders { 4 | &:#{$placeholder}-placeholder { 5 | @content; 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /scss/bourbon/css3/_radial-gradient.scss: -------------------------------------------------------------------------------- 1 | // Requires Sass 3.1+ 2 | @mixin radial-gradient($g1, $g2, 3 | $g3: null, $g4: null, 4 | $g5: null, $g6: null, 5 | $g7: null, $g8: null, 6 | $g9: null, $g10: null, 7 | $pos: null, 8 | $shape-size: null, 9 | $fallback: null) { 10 | 11 | $data: _radial-arg-parser($g1, $g2, $pos, $shape-size); 12 | $g1: nth($data, 1); 13 | $g2: nth($data, 2); 14 | $pos: nth($data, 3); 15 | $shape-size: nth($data, 4); 16 | 17 | $full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10; 18 | 19 | // Strip deprecated cover/contain for spec 20 | $shape-size-spec: _shape-size-stripper($shape-size); 21 | 22 | // Set $g1 as the default fallback color 23 | $first-color: nth($full, 1); 24 | $fallback-color: nth($first-color, 1); 25 | 26 | @if (type-of($fallback) == color) or ($fallback == "transparent") { 27 | $fallback-color: $fallback; 28 | } 29 | 30 | // Add Commas and spaces 31 | $shape-size: if($shape-size, "#{$shape-size}, ", null); 32 | $pos: if($pos, "#{$pos}, ", null); 33 | $pos-spec: if($pos, "at #{$pos}", null); 34 | $shape-size-spec: if(($shape-size-spec != " ") and ($pos == null), "#{$shape-size-spec}, ", "#{$shape-size-spec} "); 35 | 36 | background-color: $fallback-color; 37 | background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full})); 38 | background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})"); 39 | } 40 | -------------------------------------------------------------------------------- /scss/bourbon/css3/_selection.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Outputs the spec and prefixed versions of the `::selection` pseudo-element. 4 | /// 5 | /// @param {Bool} $current-selector [false] 6 | /// If set to `true`, it takes the current element into consideration. 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include selection(true) { 11 | /// background-color: #ffbb52; 12 | /// } 13 | /// } 14 | /// 15 | /// @example css - CSS Output 16 | /// .element::-moz-selection { 17 | /// background-color: #ffbb52; 18 | /// } 19 | /// 20 | /// .element::selection { 21 | /// background-color: #ffbb52; 22 | /// } 23 | 24 | @mixin selection($current-selector: false) { 25 | @if $current-selector { 26 | &::-moz-selection { 27 | @content; 28 | } 29 | 30 | &::selection { 31 | @content; 32 | } 33 | } @else { 34 | ::-moz-selection { 35 | @content; 36 | } 37 | 38 | ::selection { 39 | @content; 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /scss/bourbon/css3/_text-decoration.scss: -------------------------------------------------------------------------------- 1 | @mixin text-decoration($value) { 2 | // || || 3 | @include prefixer(text-decoration, $value, moz); 4 | } 5 | 6 | @mixin text-decoration-line($line: none) { 7 | // none || underline || overline || line-through 8 | @include prefixer(text-decoration-line, $line, moz); 9 | } 10 | 11 | @mixin text-decoration-style($style: solid) { 12 | // solid || double || dotted || dashed || wavy 13 | @include prefixer(text-decoration-style, $style, moz webkit); 14 | } 15 | 16 | @mixin text-decoration-color($color: currentColor) { 17 | // currentColor || 18 | @include prefixer(text-decoration-color, $color, moz); 19 | } 20 | -------------------------------------------------------------------------------- /scss/bourbon/css3/_transform.scss: -------------------------------------------------------------------------------- 1 | @mixin transform($property: none) { 2 | // none | 3 | @include prefixer(transform, $property, webkit moz ms o spec); 4 | } 5 | 6 | @mixin transform-origin($axes: 50%) { 7 | // x-axis - left | center | right | length | % 8 | // y-axis - top | center | bottom | length | % 9 | // z-axis - length 10 | @include prefixer(transform-origin, $axes, webkit moz ms o spec); 11 | } 12 | 13 | @mixin transform-style($style: flat) { 14 | @include prefixer(transform-style, $style, webkit moz ms o spec); 15 | } 16 | -------------------------------------------------------------------------------- /scss/bourbon/css3/_transition.scss: -------------------------------------------------------------------------------- 1 | // Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. 2 | // Example: @include transition (all 2s ease-in-out); 3 | // @include transition (opacity 1s ease-in 2s, width 2s ease-out); 4 | // @include transition-property (transform, opacity); 5 | 6 | @mixin transition($properties...) { 7 | // Fix for vendor-prefix transform property 8 | $needs-prefixes: false; 9 | $webkit: (); 10 | $moz: (); 11 | $spec: (); 12 | 13 | // Create lists for vendor-prefixed transform 14 | @each $list in $properties { 15 | @if nth($list, 1) == "transform" { 16 | $needs-prefixes: true; 17 | $list1: -webkit-transform; 18 | $list2: -moz-transform; 19 | $list3: (); 20 | 21 | @each $var in $list { 22 | $list3: join($list3, $var); 23 | 24 | @if $var != "transform" { 25 | $list1: join($list1, $var); 26 | $list2: join($list2, $var); 27 | } 28 | } 29 | 30 | $webkit: append($webkit, $list1); 31 | $moz: append($moz, $list2); 32 | $spec: append($spec, $list3); 33 | } @else { 34 | $webkit: append($webkit, $list, comma); 35 | $moz: append($moz, $list, comma); 36 | $spec: append($spec, $list, comma); 37 | } 38 | } 39 | 40 | @if $needs-prefixes { 41 | -webkit-transition: $webkit; 42 | -moz-transition: $moz; 43 | transition: $spec; 44 | } @else { 45 | @if length($properties) >= 1 { 46 | @include prefixer(transition, $properties, webkit moz spec); 47 | } @else { 48 | $properties: all 0.15s ease-out 0s; 49 | @include prefixer(transition, $properties, webkit moz spec); 50 | } 51 | } 52 | } 53 | 54 | @mixin transition-property($properties...) { 55 | -webkit-transition-property: transition-property-names($properties, "webkit"); 56 | -moz-transition-property: transition-property-names($properties, "moz"); 57 | transition-property: transition-property-names($properties, false); 58 | } 59 | 60 | @mixin transition-duration($times...) { 61 | @include prefixer(transition-duration, $times, webkit moz spec); 62 | } 63 | 64 | @mixin transition-timing-function($motions...) { 65 | // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() 66 | @include prefixer(transition-timing-function, $motions, webkit moz spec); 67 | } 68 | 69 | @mixin transition-delay($times...) { 70 | @include prefixer(transition-delay, $times, webkit moz spec); 71 | } 72 | -------------------------------------------------------------------------------- /scss/bourbon/css3/_user-select.scss: -------------------------------------------------------------------------------- 1 | @mixin user-select($value: none) { 2 | @include prefixer(user-select, $value, webkit moz ms spec); 3 | } 4 | -------------------------------------------------------------------------------- /scss/bourbon/functions/_assign-inputs.scss: -------------------------------------------------------------------------------- 1 | @function assign-inputs($inputs, $pseudo: null) { 2 | $list: (); 3 | 4 | @each $input in $inputs { 5 | $input: unquote($input); 6 | $input: if($pseudo, $input + ":" + $pseudo, $input); 7 | $list: append($list, $input, comma); 8 | } 9 | 10 | @return $list; 11 | } 12 | -------------------------------------------------------------------------------- /scss/bourbon/functions/_contains-falsy.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Checks if a list does not contains a value. 4 | /// 5 | /// @access private 6 | /// 7 | /// @param {List} $list 8 | /// The list to check against. 9 | /// 10 | /// @return {Bool} 11 | 12 | @function contains-falsy($list) { 13 | @each $item in $list { 14 | @if not $item { 15 | @return true; 16 | } 17 | } 18 | 19 | @return false; 20 | } 21 | -------------------------------------------------------------------------------- /scss/bourbon/functions/_contains.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Checks if a list contains a value(s). 4 | /// 5 | /// @access private 6 | /// 7 | /// @param {List} $list 8 | /// The list to check against. 9 | /// 10 | /// @param {List} $values 11 | /// A single value or list of values to check for. 12 | /// 13 | /// @example scss - Usage 14 | /// contains($list, $value) 15 | /// 16 | /// @return {Bool} 17 | 18 | @function contains($list, $values...) { 19 | @each $value in $values { 20 | @if type-of(index($list, $value)) != "number" { 21 | @return false; 22 | } 23 | } 24 | 25 | @return true; 26 | } 27 | -------------------------------------------------------------------------------- /scss/bourbon/functions/_is-length.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Checks for a valid CSS length. 4 | /// 5 | /// @param {String} $value 6 | 7 | @function is-length($value) { 8 | @return type-of($value) != "null" and (str-slice($value + "", 1, 4) == "calc" 9 | or index(auto inherit initial 0, $value) 10 | or (type-of($value) == "number" and not(unitless($value)))); 11 | } 12 | -------------------------------------------------------------------------------- /scss/bourbon/functions/_is-light.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Programatically determines whether a color is light or dark. 4 | /// 5 | /// @link http://robots.thoughtbot.com/closer-look-color-lightness 6 | /// 7 | /// @param {Color (Hex)} $color 8 | /// 9 | /// @example scss - Usage 10 | /// is-light($color) 11 | /// 12 | /// @return {Bool} 13 | 14 | @function is-light($hex-color) { 15 | $-local-red: red(rgba($hex-color, 1)); 16 | $-local-green: green(rgba($hex-color, 1)); 17 | $-local-blue: blue(rgba($hex-color, 1)); 18 | $-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255; 19 | 20 | @return $-local-lightness > 0.6; 21 | } 22 | -------------------------------------------------------------------------------- /scss/bourbon/functions/_is-number.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Checks for a valid number. 4 | /// 5 | /// @param {Number} $value 6 | /// 7 | /// @require {function} contains 8 | 9 | @function is-number($value) { 10 | @return contains("0" "1" "2" "3" "4" "5" "6" "7" "8" "9" 0 1 2 3 4 5 6 7 8 9, $value); 11 | } 12 | -------------------------------------------------------------------------------- /scss/bourbon/functions/_is-size.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Checks for a valid CSS size. 4 | /// 5 | /// @param {String} $value 6 | /// 7 | /// @require {function} contains 8 | /// @require {function} is-length 9 | 10 | @function is-size($value) { 11 | @return is-length($value) 12 | or contains("fill" "fit-content" "min-content" "max-content", $value); 13 | } 14 | -------------------------------------------------------------------------------- /scss/bourbon/functions/_modular-scale.scss: -------------------------------------------------------------------------------- 1 | // Scaling Variables 2 | $golden: 1.618; 3 | $minor-second: 1.067; 4 | $major-second: 1.125; 5 | $minor-third: 1.2; 6 | $major-third: 1.25; 7 | $perfect-fourth: 1.333; 8 | $augmented-fourth: 1.414; 9 | $perfect-fifth: 1.5; 10 | $minor-sixth: 1.6; 11 | $major-sixth: 1.667; 12 | $minor-seventh: 1.778; 13 | $major-seventh: 1.875; 14 | $octave: 2; 15 | $major-tenth: 2.5; 16 | $major-eleventh: 2.667; 17 | $major-twelfth: 3; 18 | $double-octave: 4; 19 | 20 | $modular-scale-ratio: $perfect-fourth !default; 21 | $modular-scale-base: em($em-base) !default; 22 | 23 | @function modular-scale($increment, $value: $modular-scale-base, $ratio: $modular-scale-ratio) { 24 | $v1: nth($value, 1); 25 | $v2: nth($value, length($value)); 26 | $value: $v1; 27 | 28 | // scale $v2 to just above $v1 29 | @while $v2 > $v1 { 30 | $v2: ($v2 / $ratio); // will be off-by-1 31 | } 32 | @while $v2 < $v1 { 33 | $v2: ($v2 * $ratio); // will fix off-by-1 34 | } 35 | 36 | // check AFTER scaling $v2 to prevent double-counting corner-case 37 | $double-stranded: $v2 > $v1; 38 | 39 | @if $increment > 0 { 40 | @for $i from 1 through $increment { 41 | @if $double-stranded and ($v1 * $ratio) > $v2 { 42 | $value: $v2; 43 | $v2: ($v2 * $ratio); 44 | } @else { 45 | $v1: ($v1 * $ratio); 46 | $value: $v1; 47 | } 48 | } 49 | } 50 | 51 | @if $increment < 0 { 52 | // adjust $v2 to just below $v1 53 | @if $double-stranded { 54 | $v2: ($v2 / $ratio); 55 | } 56 | 57 | @for $i from $increment through -1 { 58 | @if $double-stranded and ($v1 / $ratio) < $v2 { 59 | $value: $v2; 60 | $v2: ($v2 / $ratio); 61 | } @else { 62 | $v1: ($v1 / $ratio); 63 | $value: $v1; 64 | } 65 | } 66 | } 67 | 68 | @return $value; 69 | } 70 | -------------------------------------------------------------------------------- /scss/bourbon/functions/_px-to-em.scss: -------------------------------------------------------------------------------- 1 | // Convert pixels to ems 2 | // eg. for a relational value of 12px write em(12) when the parent is 16px 3 | // if the parent is another value say 24px write em(12, 24) 4 | 5 | @function em($pxval, $base: $em-base) { 6 | @if not unitless($pxval) { 7 | $pxval: strip-units($pxval); 8 | } 9 | @if not unitless($base) { 10 | $base: strip-units($base); 11 | } 12 | @return ($pxval / $base) * 1em; 13 | } 14 | -------------------------------------------------------------------------------- /scss/bourbon/functions/_px-to-rem.scss: -------------------------------------------------------------------------------- 1 | // Convert pixels to rems 2 | // eg. for a relational value of 12px write rem(12) 3 | // Assumes $em-base is the font-size of 4 | 5 | @function rem($pxval) { 6 | @if not unitless($pxval) { 7 | $pxval: strip-units($pxval); 8 | } 9 | 10 | $base: $em-base; 11 | @if not unitless($base) { 12 | $base: strip-units($base); 13 | } 14 | @return ($pxval / $base) * 1rem; 15 | } 16 | -------------------------------------------------------------------------------- /scss/bourbon/functions/_shade.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Mixes a color with black. 4 | /// 5 | /// @param {Color} $color 6 | /// 7 | /// @param {Number (Percentage)} $percent 8 | /// The amount of black to be mixed in. 9 | /// 10 | /// @example scss - Usage 11 | /// .element { 12 | /// background-color: shade(#ffbb52, 60%); 13 | /// } 14 | /// 15 | /// @example css - CSS Output 16 | /// .element { 17 | /// background-color: #664a20; 18 | /// } 19 | /// 20 | /// @return {Color} 21 | 22 | @function shade($color, $percent) { 23 | @return mix(#000, $color, $percent); 24 | } 25 | -------------------------------------------------------------------------------- /scss/bourbon/functions/_strip-units.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Strips the unit from a number. 4 | /// 5 | /// @param {Number (With Unit)} $value 6 | /// 7 | /// @example scss - Usage 8 | /// $dimension: strip-units(10em); 9 | /// 10 | /// @example css - CSS Output 11 | /// $dimension: 10; 12 | /// 13 | /// @return {Number (Unitless)} 14 | 15 | @function strip-units($value) { 16 | @return ($value / ($value * 0 + 1)); 17 | } 18 | -------------------------------------------------------------------------------- /scss/bourbon/functions/_tint.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Mixes a color with white. 4 | /// 5 | /// @param {Color} $color 6 | /// 7 | /// @param {Number (Percentage)} $percent 8 | /// The amount of white to be mixed in. 9 | /// 10 | /// @example scss - Usage 11 | /// .element { 12 | /// background-color: tint(#6ecaa6, 40%); 13 | /// } 14 | /// 15 | /// @example css - CSS Output 16 | /// .element { 17 | /// background-color: #a8dfc9; 18 | /// } 19 | /// 20 | /// @return {Color} 21 | 22 | @function tint($color, $percent) { 23 | @return mix(#fff, $color, $percent); 24 | } 25 | -------------------------------------------------------------------------------- /scss/bourbon/functions/_transition-property-name.scss: -------------------------------------------------------------------------------- 1 | // Return vendor-prefixed property names if appropriate 2 | // Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background 3 | //************************************************************************// 4 | @function transition-property-names($props, $vendor: false) { 5 | $new-props: (); 6 | 7 | @each $prop in $props { 8 | $new-props: append($new-props, transition-property-name($prop, $vendor), comma); 9 | } 10 | 11 | @return $new-props; 12 | } 13 | 14 | @function transition-property-name($prop, $vendor: false) { 15 | // put other properties that need to be prefixed here aswell 16 | @if $vendor and $prop == transform { 17 | @return unquote('-'+$vendor+'-'+$prop); 18 | } 19 | @else { 20 | @return $prop; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /scss/bourbon/functions/_unpack.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Converts shorthand to the 4-value syntax. 4 | /// 5 | /// @param {List} $shorthand 6 | /// 7 | /// @example scss - Usage 8 | /// .element { 9 | /// margin: unpack(1em 2em); 10 | /// } 11 | /// 12 | /// @example css - CSS Output 13 | /// .element { 14 | /// margin: 1em 2em 1em 2em; 15 | /// } 16 | 17 | @function unpack($shorthand) { 18 | @if length($shorthand) == 1 { 19 | @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1); 20 | } @else if length($shorthand) == 2 { 21 | @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2); 22 | } @else if length($shorthand) == 3 { 23 | @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2); 24 | } @else { 25 | @return $shorthand; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /scss/bourbon/helpers/_convert-units.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Helper function for str-to-num fn. 3 | // Source: http://sassmeister.com/gist/9647408 4 | //************************************************************************// 5 | @function _convert-units($number, $unit) { 6 | $strings: "px", "cm", "mm", "%", "ch", "pica", "in", "em", "rem", "pt", "pc", "ex", "vw", "vh", "vmin", "vmax", "deg", "rad", "grad", "turn"; 7 | $units: 1px, 1cm, 1mm, 1%, 1ch, 1pica, 1in, 1em, 1rem, 1pt, 1pc, 1ex, 1vw, 1vh, 1vmin, 1vmax, 1deg, 1rad, 1grad, 1turn; 8 | $index: index($strings, $unit); 9 | 10 | @if not $index { 11 | @warn "Unknown unit `#{$unit}`."; 12 | @return false; 13 | } 14 | 15 | @if type-of($number) != "number" { 16 | @warn "`#{$number} is not a number`"; 17 | @return false; 18 | } 19 | 20 | @return $number * nth($units, $index); 21 | } 22 | -------------------------------------------------------------------------------- /scss/bourbon/helpers/_directional-values.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Directional-property mixins are shorthands for writing properties like the following 4 | /// 5 | /// @ignore You can also use `false` instead of `null`. 6 | /// 7 | /// @param {List} $vals 8 | /// List of directional values 9 | /// 10 | /// @example scss - Usage 11 | /// .element { 12 | /// @include border-style(dotted null); 13 | /// @include margin(null 0 10px); 14 | /// } 15 | /// 16 | /// @example css - CSS Output 17 | /// .element { 18 | /// border-bottom-style: dotted; 19 | /// border-top-style: dotted; 20 | /// margin-bottom: 10px; 21 | /// margin-left: 0; 22 | /// margin-right: 0; 23 | /// } 24 | /// 25 | /// @require {function} contains-falsy 26 | /// 27 | /// @return {List} 28 | 29 | @function collapse-directionals($vals) { 30 | $output: null; 31 | 32 | $a: nth($vals, 1); 33 | $b: if(length($vals) < 2, $a, nth($vals, 2)); 34 | $c: if(length($vals) < 3, $a, nth($vals, 3)); 35 | $d: if(length($vals) < 2, $a, nth($vals, if(length($vals) < 4, 2, 4))); 36 | 37 | @if $a == 0 { $a: 0; } 38 | @if $b == 0 { $b: 0; } 39 | @if $c == 0 { $c: 0; } 40 | @if $d == 0 { $d: 0; } 41 | 42 | @if $a == $b and $a == $c and $a == $d { $output: $a; } 43 | @else if $a == $c and $b == $d { $output: $a $b; } 44 | @else if $b == $d { $output: $a $b $c; } 45 | @else { $output: $a $b $c $d; } 46 | 47 | @return $output; 48 | } 49 | 50 | /// Output directional properties, for instance `margin`. 51 | /// 52 | /// @access private 53 | /// 54 | /// @param {String} $pre 55 | /// Prefix to use 56 | /// @param {String} $suf 57 | /// Suffix to use 58 | /// @param {List} $vals 59 | /// List of values 60 | /// 61 | /// @require {function} collapse-directionals 62 | /// @require {function} contains-falsy 63 | 64 | @mixin directional-property($pre, $suf, $vals) { 65 | // Property Names 66 | $top: $pre + "-top" + if($suf, "-#{$suf}", ""); 67 | $bottom: $pre + "-bottom" + if($suf, "-#{$suf}", ""); 68 | $left: $pre + "-left" + if($suf, "-#{$suf}", ""); 69 | $right: $pre + "-right" + if($suf, "-#{$suf}", ""); 70 | $all: $pre + if($suf, "-#{$suf}", ""); 71 | 72 | $vals: collapse-directionals($vals); 73 | 74 | @if contains-falsy($vals) { 75 | @if nth($vals, 1) { #{$top}: nth($vals, 1); } 76 | 77 | @if length($vals) == 1 { 78 | @if nth($vals, 1) { #{$right}: nth($vals, 1); } 79 | } @else { 80 | @if nth($vals, 2) { #{$right}: nth($vals, 2); } 81 | } 82 | 83 | @if length($vals) == 2 { 84 | @if nth($vals, 1) { #{$bottom}: nth($vals, 1); } 85 | @if nth($vals, 2) { #{$left}: nth($vals, 2); } 86 | } @else if length($vals) == 3 { 87 | @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } 88 | @if nth($vals, 2) { #{$left}: nth($vals, 2); } 89 | } @else if length($vals) == 4 { 90 | @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } 91 | @if nth($vals, 4) { #{$left}: nth($vals, 4); } 92 | } 93 | } @else { 94 | #{$all}: $vals; 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /scss/bourbon/helpers/_font-source-declaration.scss: -------------------------------------------------------------------------------- 1 | // Used for creating the source string for fonts using @font-face 2 | // Reference: http://goo.gl/Ru1bKP 3 | 4 | @function font-url-prefixer($asset-pipeline) { 5 | @if $asset-pipeline == true { 6 | @return font-url; 7 | } @else { 8 | @return url; 9 | } 10 | } 11 | 12 | @function font-source-declaration( 13 | $font-family, 14 | $file-path, 15 | $asset-pipeline, 16 | $file-formats, 17 | $font-url) { 18 | 19 | $src: (); 20 | 21 | $formats-map: ( 22 | eot: "#{$file-path}.eot?#iefix" format("embedded-opentype"), 23 | woff2: "#{$file-path}.woff2" format("woff2"), 24 | woff: "#{$file-path}.woff" format("woff"), 25 | ttf: "#{$file-path}.ttf" format("truetype"), 26 | svg: "#{$file-path}.svg##{$font-family}" format("svg") 27 | ); 28 | 29 | @each $key, $values in $formats-map { 30 | @if contains($file-formats, $key) { 31 | $file-path: nth($values, 1); 32 | $font-format: nth($values, 2); 33 | 34 | @if $asset-pipeline == true { 35 | $src: append($src, font-url($file-path) $font-format, comma); 36 | } @else { 37 | $src: append($src, url($file-path) $font-format, comma); 38 | } 39 | } 40 | } 41 | 42 | @return $src; 43 | } 44 | -------------------------------------------------------------------------------- /scss/bourbon/helpers/_gradient-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _gradient-positions-parser($gradient-type, $gradient-positions) { 2 | @if $gradient-positions 3 | and ($gradient-type == linear) 4 | and (type-of($gradient-positions) != color) { 5 | $gradient-positions: _linear-positions-parser($gradient-positions); 6 | } 7 | @else if $gradient-positions 8 | and ($gradient-type == radial) 9 | and (type-of($gradient-positions) != color) { 10 | $gradient-positions: _radial-positions-parser($gradient-positions); 11 | } 12 | @return $gradient-positions; 13 | } 14 | -------------------------------------------------------------------------------- /scss/bourbon/helpers/_linear-angle-parser.scss: -------------------------------------------------------------------------------- 1 | // Private function for linear-gradient-parser 2 | @function _linear-angle-parser($image, $first-val, $prefix, $suffix) { 3 | $offset: null; 4 | $unit-short: str-slice($first-val, str-length($first-val) - 2, str-length($first-val)); 5 | $unit-long: str-slice($first-val, str-length($first-val) - 3, str-length($first-val)); 6 | 7 | @if ($unit-long == "grad") or 8 | ($unit-long == "turn") { 9 | $offset: if($unit-long == "grad", -100grad * 3, -0.75turn); 10 | } 11 | 12 | @else if ($unit-short == "deg") or 13 | ($unit-short == "rad") { 14 | $offset: if($unit-short == "deg", -90 * 3, 1.6rad); 15 | } 16 | 17 | @if $offset { 18 | $num: _str-to-num($first-val); 19 | 20 | @return ( 21 | webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix, 22 | spec-image: $image 23 | ); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /scss/bourbon/helpers/_linear-gradient-parser.scss: -------------------------------------------------------------------------------- 1 | @function _linear-gradient-parser($image) { 2 | $image: unquote($image); 3 | $gradients: (); 4 | $start: str-index($image, "("); 5 | $end: str-index($image, ","); 6 | $first-val: str-slice($image, $start + 1, $end - 1); 7 | 8 | $prefix: str-slice($image, 0, $start); 9 | $suffix: str-slice($image, $end, str-length($image)); 10 | 11 | $has-multiple-vals: str-index($first-val, " "); 12 | $has-single-position: unquote(_position-flipper($first-val) + ""); 13 | $has-angle: is-number(str-slice($first-val, 0, 0)); 14 | 15 | @if $has-multiple-vals { 16 | $gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals); 17 | } 18 | 19 | @else if $has-single-position != "" { 20 | $pos: unquote($has-single-position + ""); 21 | 22 | $gradients: ( 23 | webkit-image: -webkit- + $image, 24 | spec-image: $prefix + "to " + $pos + $suffix 25 | ); 26 | } 27 | 28 | @else if $has-angle { 29 | // Rotate degree for webkit 30 | $gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix); 31 | } 32 | 33 | @else { 34 | $gradients: ( 35 | webkit-image: -webkit- + $image, 36 | spec-image: $image 37 | ); 38 | } 39 | 40 | @return $gradients; 41 | } 42 | -------------------------------------------------------------------------------- /scss/bourbon/helpers/_linear-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _linear-positions-parser($pos) { 2 | $type: type-of(nth($pos, 1)); 3 | $spec: null; 4 | $degree: null; 5 | $side: null; 6 | $corner: null; 7 | $length: length($pos); 8 | // Parse Side and corner positions 9 | @if ($length > 1) { 10 | @if nth($pos, 1) == "to" { // Newer syntax 11 | $side: nth($pos, 2); 12 | 13 | @if $length == 2 { // eg. to top 14 | // Swap for backwards compatability 15 | $degree: _position-flipper(nth($pos, 2)); 16 | } 17 | @else if $length == 3 { // eg. to top left 18 | $corner: nth($pos, 3); 19 | } 20 | } 21 | @else if $length == 2 { // Older syntax ("top left") 22 | $side: _position-flipper(nth($pos, 1)); 23 | $corner: _position-flipper(nth($pos, 2)); 24 | } 25 | 26 | @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") { 27 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 28 | } 29 | @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") { 30 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 31 | } 32 | @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") { 33 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 34 | } 35 | @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") { 36 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 37 | } 38 | $spec: to $side $corner; 39 | } 40 | @else if $length == 1 { 41 | // Swap for backwards compatability 42 | @if $type == string { 43 | $degree: $pos; 44 | $spec: to _position-flipper($pos); 45 | } 46 | @else { 47 | $degree: -270 - $pos; //rotate the gradient opposite from spec 48 | $spec: $pos; 49 | } 50 | } 51 | $degree: unquote($degree + ","); 52 | $spec: unquote($spec + ","); 53 | @return $degree $spec; 54 | } 55 | 56 | @function _position-flipper($pos) { 57 | @return if($pos == left, right, null) 58 | if($pos == right, left, null) 59 | if($pos == top, bottom, null) 60 | if($pos == bottom, top, null); 61 | } 62 | -------------------------------------------------------------------------------- /scss/bourbon/helpers/_linear-side-corner-parser.scss: -------------------------------------------------------------------------------- 1 | // Private function for linear-gradient-parser 2 | @function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) { 3 | $val-1: str-slice($first-val, 0, $has-multiple-vals - 1 ); 4 | $val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val)); 5 | $val-3: null; 6 | $has-val-3: str-index($val-2, " "); 7 | 8 | @if $has-val-3 { 9 | $val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2)); 10 | $val-2: str-slice($val-2, 0, $has-val-3 - 1); 11 | } 12 | 13 | $pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3); 14 | $pos: unquote($pos + ""); 15 | 16 | // Use old spec for webkit 17 | @if $val-1 == "to" { 18 | @return ( 19 | webkit-image: -webkit- + $prefix + $pos + $suffix, 20 | spec-image: $image 21 | ); 22 | } 23 | 24 | // Bring the code up to spec 25 | @else { 26 | @return ( 27 | webkit-image: -webkit- + $image, 28 | spec-image: $prefix + "to " + $pos + $suffix 29 | ); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /scss/bourbon/helpers/_radial-arg-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-arg-parser($g1, $g2, $pos, $shape-size) { 2 | @each $value in $g1, $g2 { 3 | $first-val: nth($value, 1); 4 | $pos-type: type-of($first-val); 5 | $spec-at-index: null; 6 | 7 | // Determine if spec was passed to mixin 8 | @if type-of($value) == list { 9 | $spec-at-index: if(index($value, at), index($value, at), false); 10 | } 11 | @if $spec-at-index { 12 | @if $spec-at-index > 1 { 13 | @for $i from 1 through ($spec-at-index - 1) { 14 | $shape-size: $shape-size nth($value, $i); 15 | } 16 | @for $i from ($spec-at-index + 1) through length($value) { 17 | $pos: $pos nth($value, $i); 18 | } 19 | } 20 | @else if $spec-at-index == 1 { 21 | @for $i from ($spec-at-index + 1) through length($value) { 22 | $pos: $pos nth($value, $i); 23 | } 24 | } 25 | $g1: null; 26 | } 27 | 28 | // If not spec calculate correct values 29 | @else { 30 | @if ($pos-type != color) or ($first-val != "transparent") { 31 | @if ($pos-type == number) 32 | or ($first-val == "center") 33 | or ($first-val == "top") 34 | or ($first-val == "right") 35 | or ($first-val == "bottom") 36 | or ($first-val == "left") { 37 | 38 | $pos: $value; 39 | 40 | @if $pos == $g1 { 41 | $g1: null; 42 | } 43 | } 44 | 45 | @else if 46 | ($first-val == "ellipse") 47 | or ($first-val == "circle") 48 | or ($first-val == "closest-side") 49 | or ($first-val == "closest-corner") 50 | or ($first-val == "farthest-side") 51 | or ($first-val == "farthest-corner") 52 | or ($first-val == "contain") 53 | or ($first-val == "cover") { 54 | 55 | $shape-size: $value; 56 | 57 | @if $value == $g1 { 58 | $g1: null; 59 | } 60 | 61 | @else if $value == $g2 { 62 | $g2: null; 63 | } 64 | } 65 | } 66 | } 67 | } 68 | @return $g1, $g2, $pos, $shape-size; 69 | } 70 | -------------------------------------------------------------------------------- /scss/bourbon/helpers/_radial-gradient-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-gradient-parser($image) { 2 | $image: unquote($image); 3 | $gradients: (); 4 | $start: str-index($image, "("); 5 | $end: str-index($image, ","); 6 | $first-val: str-slice($image, $start + 1, $end - 1); 7 | 8 | $prefix: str-slice($image, 0, $start); 9 | $suffix: str-slice($image, $end, str-length($image)); 10 | 11 | $is-spec-syntax: str-index($first-val, "at"); 12 | 13 | @if $is-spec-syntax and $is-spec-syntax > 1 { 14 | $keyword: str-slice($first-val, 1, $is-spec-syntax - 2); 15 | $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); 16 | $pos: append($pos, $keyword, comma); 17 | 18 | $gradients: ( 19 | webkit-image: -webkit- + $prefix + $pos + $suffix, 20 | spec-image: $image 21 | ); 22 | } 23 | 24 | @else if $is-spec-syntax == 1 { 25 | $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); 26 | 27 | $gradients: ( 28 | webkit-image: -webkit- + $prefix + $pos + $suffix, 29 | spec-image: $image 30 | ); 31 | } 32 | 33 | @else if str-index($image, "cover") or str-index($image, "contain") { 34 | @warn "Radial-gradient needs to be updated to conform to latest spec."; 35 | 36 | $gradients: ( 37 | webkit-image: null, 38 | spec-image: $image 39 | ); 40 | } 41 | 42 | @else { 43 | $gradients: ( 44 | webkit-image: -webkit- + $image, 45 | spec-image: $image 46 | ); 47 | } 48 | 49 | @return $gradients; 50 | } 51 | -------------------------------------------------------------------------------- /scss/bourbon/helpers/_radial-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-positions-parser($gradient-pos) { 2 | $shape-size: nth($gradient-pos, 1); 3 | $pos: nth($gradient-pos, 2); 4 | $shape-size-spec: _shape-size-stripper($shape-size); 5 | 6 | $pre-spec: unquote(if($pos, "#{$pos}, ", null)) 7 | unquote(if($shape-size, "#{$shape-size},", null)); 8 | $pos-spec: if($pos, "at #{$pos}", null); 9 | 10 | $spec: "#{$shape-size-spec} #{$pos-spec}"; 11 | 12 | // Add comma 13 | @if ($spec != " ") { 14 | $spec: "#{$spec},"; 15 | } 16 | 17 | @return $pre-spec $spec; 18 | } 19 | -------------------------------------------------------------------------------- /scss/bourbon/helpers/_render-gradients.scss: -------------------------------------------------------------------------------- 1 | // User for linear and radial gradients within background-image or border-image properties 2 | 3 | @function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) { 4 | $pre-spec: null; 5 | $spec: null; 6 | $vendor-gradients: null; 7 | @if $gradient-type == linear { 8 | @if $gradient-positions { 9 | $pre-spec: nth($gradient-positions, 1); 10 | $spec: nth($gradient-positions, 2); 11 | } 12 | } 13 | @else if $gradient-type == radial { 14 | $pre-spec: nth($gradient-positions, 1); 15 | $spec: nth($gradient-positions, 2); 16 | } 17 | 18 | @if $vendor { 19 | $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients); 20 | } 21 | @else if $vendor == false { 22 | $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})"; 23 | $vendor-gradients: unquote($vendor-gradients); 24 | } 25 | @return $vendor-gradients; 26 | } 27 | -------------------------------------------------------------------------------- /scss/bourbon/helpers/_shape-size-stripper.scss: -------------------------------------------------------------------------------- 1 | @function _shape-size-stripper($shape-size) { 2 | $shape-size-spec: null; 3 | @each $value in $shape-size { 4 | @if ($value == "cover") or ($value == "contain") { 5 | $value: null; 6 | } 7 | $shape-size-spec: "#{$shape-size-spec} #{$value}"; 8 | } 9 | @return $shape-size-spec; 10 | } 11 | -------------------------------------------------------------------------------- /scss/bourbon/helpers/_str-to-num.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Helper function for linear/radial-gradient-parsers. 3 | // Source: http://sassmeister.com/gist/9647408 4 | //************************************************************************// 5 | @function _str-to-num($string) { 6 | // Matrices 7 | $strings: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; 8 | $numbers: 0 1 2 3 4 5 6 7 8 9; 9 | 10 | // Result 11 | $result: 0; 12 | $divider: 0; 13 | $minus: false; 14 | 15 | // Looping through all characters 16 | @for $i from 1 through str-length($string) { 17 | $character: str-slice($string, $i, $i); 18 | $index: index($strings, $character); 19 | 20 | @if $character == "-" { 21 | $minus: true; 22 | } 23 | 24 | @else if $character == "." { 25 | $divider: 1; 26 | } 27 | 28 | @else { 29 | @if not $index { 30 | $result: if($minus, $result * -1, $result); 31 | @return _convert-units($result, str-slice($string, $i)); 32 | } 33 | 34 | $number: nth($numbers, $index); 35 | 36 | @if $divider == 0 { 37 | $result: $result * 10; 38 | } 39 | 40 | @else { 41 | // Move the decimal dot to the left 42 | $divider: $divider * 10; 43 | $number: $number / $divider; 44 | } 45 | 46 | $result: $result + $number; 47 | } 48 | } 49 | @return if($minus, $result * -1, $result); 50 | } 51 | -------------------------------------------------------------------------------- /scss/bourbon/settings/_asset-pipeline.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// A global setting to enable or disable the `$asset-pipeline` variable for all functions that accept it. 4 | /// 5 | /// @type Bool 6 | 7 | $asset-pipeline: false !default; 8 | -------------------------------------------------------------------------------- /scss/bourbon/settings/_prefixer.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Global variables to enable or disable vendor prefixes 4 | 5 | $prefix-for-webkit: true !default; 6 | $prefix-for-mozilla: true !default; 7 | $prefix-for-microsoft: true !default; 8 | $prefix-for-opera: true !default; 9 | $prefix-for-spec: true !default; 10 | -------------------------------------------------------------------------------- /scss/bourbon/settings/_px-to-em.scss: -------------------------------------------------------------------------------- 1 | $em-base: 16px !default; 2 | -------------------------------------------------------------------------------- /scss/demo.scss: -------------------------------------------------------------------------------- 1 | $iconfont-path: '../icons/fonts/'; 2 | $iconfont-name: "icomoon"; 3 | 4 | $icons: ( 5 | chevron-thin-right: "\e683", 6 | unfold-more: "\e665", 7 | ); 8 | 9 | @import "fonts"; 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | *{ 26 | margin:0; 27 | padding:0; 28 | } 29 | 30 | html, body { 31 | margin: 0; 32 | padding: 0; 33 | height: 100%; 34 | color: #2e2e2e; 35 | font-size: 12px; 36 | font-family: Tahoma,sans-serif,Arial; 37 | 38 | @media screen and (min-width: 240px) { 39 | font-size: 9.6px; 40 | } 41 | @media screen and (min-width: 320px) { 42 | } 43 | @media screen and (min-width: 480px) { 44 | font-size: 11.273px; 45 | } 46 | @media screen and (min-width: 768px) { 47 | font-size: 12px; 48 | } 49 | @media screen and (min-width: 1024px) { 50 | } 51 | @media screen and (min-width: 1280px) { 52 | font-size: 12.4px; 53 | } 54 | @media screen and (min-width: 1440px) { 55 | font-size: 13.1px; 56 | } 57 | @media screen and (min-width: 1920px) { 58 | font-size: 14.18px; 59 | } 60 | } 61 | 62 | body { 63 | @include backface-visibility(hidden); 64 | } 65 | 66 | form { 67 | margin: 0; 68 | padding: 0; 69 | } 70 | 71 | a:link, a:visited, a:hover { 72 | text-decoration: none; 73 | } 74 | 75 | ul, li { 76 | list-style-type: none; 77 | margin: 0; 78 | padding: 0; 79 | } 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | $click-area-height: 3.2rem; 95 | $m-click-area-height: 5rem; 96 | 97 | $click-area-fontsize: 1.3rem; 98 | $m-click-area-fontsize: 1.32rem; 99 | 100 | $click-area-color: #525252; 101 | $m-click-area-color: #777777; 102 | 103 | @import "picker"; 104 | 105 | 106 | 107 | .picker { 108 | >.box { 109 | cursor: pointer; 110 | 111 | @media screen and (max-width: 767px) { 112 | box-sizing: border-box; 113 | line-height: $m-click-area-height; 114 | font-size: $m-click-area-fontsize; 115 | color: $m-click-area-color; 116 | 117 | @include icon(after, chevron-thin-right, $size: 1.6rem, $mr: 0.6em, $color: #bbb) { 118 | float: right; 119 | line-height: $m-click-area-height; 120 | } 121 | } 122 | 123 | @media screen and (min-width: 768px) { 124 | border: 1px solid #e0e0e0; 125 | background-color: #f6f6f6; 126 | padding-left: 0.9rem; 127 | box-sizing: border-box; 128 | line-height: $click-area-height; 129 | font-size: $click-area-fontsize; 130 | color: $click-area-color; 131 | 132 | @include icon(after, unfold-more, $size: 2.2rem, $color: #888) { 133 | line-height: $click-area-height; 134 | text-align: center; 135 | padding: 0 0.6rem; 136 | float: right; 137 | background-color: #eaeaea; 138 | border-left: 1px solid #e0e0e0; 139 | } 140 | 141 | >label { 142 | font-size: $click-area-fontsize; 143 | color: #525252; 144 | } 145 | } 146 | } 147 | } 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | .list-area { 161 | margin-top: 5rem; 162 | 163 | @media screen and (max-width: 767px) { 164 | } 165 | 166 | @media screen and (min-width: 768px) { 167 | width: 500px; 168 | margin-left: auto; 169 | margin-right: auto; 170 | } 171 | 172 | >ul { 173 | @media screen and (max-width: 767px) { 174 | border-bottom: 1px solid #e8e8e8; 175 | 176 | $item-fontsize: $m-click-area-fontsize; 177 | $item-height: $m-click-area-height; 178 | $content-hmargin: 1.6rem; 179 | 180 | >li { 181 | position: relative; 182 | background-color: #fff; 183 | border-top: 1px solid #e8e8e8; 184 | padding: 0 $content-hmargin; 185 | 186 | &:after { 187 | content: ' '; 188 | clear: both; 189 | display: table; //key for clear 190 | } 191 | 192 | >label { 193 | position: absolute; 194 | top: 0; 195 | left: $content-hmargin; 196 | display: block; 197 | font-size: $item-fontsize; 198 | line-height: $item-height; 199 | width: 7rem; 200 | color: #440f24; 201 | } 202 | .edit { 203 | margin-left: 7rem; 204 | } 205 | 206 | } //li 207 | } 208 | 209 | @media screen and (min-width: 768px) { 210 | padding: 1.8rem;; 211 | 212 | $item-fontsize: $click-area-fontsize; 213 | $item-height: $click-area-height; 214 | 215 | >li { 216 | padding: 0.5rem 0; 217 | font-size: $item-fontsize; 218 | 219 | &:after { 220 | content: ' '; 221 | clear: both; 222 | display: table; //key for clear 223 | } 224 | 225 | 226 | >label { 227 | float: left; 228 | display: block; 229 | width: 6rem; 230 | margin-right: 1rem; 231 | padding: 1px; 232 | color: #898989; 233 | line-height: $item-height; 234 | } 235 | .edit { 236 | //overflow: hidden; 237 | margin-left: 7rem; 238 | padding: 1px; 239 | height: $item-height + 0.1rem; 240 | } 241 | 242 | } //li 243 | } 244 | } //ul 245 | } -------------------------------------------------------------------------------- /scss/fonts.scss: -------------------------------------------------------------------------------- 1 | @import "bourbon/bourbon"; 2 | 3 | 4 | 5 | @mixin icon-content($icon, $color: false) { 6 | content: "#{map-get($icons, $icon)}"; 7 | @if $color { 8 | color: $color; 9 | } 10 | } 11 | 12 | 13 | // For adding font icons to elements using CSS pseudo-elements 14 | // http://jaydenseric.com/blog/fun-with-sass-and-font-icons 15 | @mixin icon($position: before, $icon: false, $size: false, $color: false, $mr: false, $ml: false, $line-height: false, $styles: true) { 16 | @if $position == both { 17 | $position: 'before, &:after'; 18 | } 19 | // Either a :before or :after pseudo-element, or both, defaulting to :before 20 | &:#{$position} { 21 | @if $icon { 22 | // A particular icon has been specified 23 | //content: "#{map-get($icons, $icon)}"; 24 | @include icon-content($icon); 25 | } 26 | @if $styles { 27 | // Supportive icon styles required 28 | speak: none; 29 | font-style: normal; 30 | font-weight: normal; 31 | font-family: $iconfont-name; 32 | -webkit-font-smoothing: antialiased; //correct being-bold in safari/chrome 33 | -webkit-text-stroke-width: 0.2px; 34 | } 35 | @if $size { 36 | font-size: $size; 37 | } 38 | @if $color { 39 | color: $color; 40 | } 41 | @if $mr { 42 | margin-right: $mr; 43 | } 44 | @if $ml { 45 | margin-left: $ml; 46 | } 47 | @if $line-height { 48 | line-height: $line-height; 49 | } 50 | // Include any extra rules supplied for the pseudo-element 51 | @content; 52 | } 53 | } 54 | 55 | @mixin icon-text($size: false) { 56 | @if $size { 57 | font-size: $size; 58 | } 59 | font-style: normal; 60 | -webkit-font-smoothing: antialiased; 61 | -webkit-text-stroke-width: 0.2px; 62 | -moz-osx-font-smoothing: grayscale; 63 | } 64 | 65 | 66 | 67 | 68 | 69 | 70 | @include font-face($iconfont-name, $iconfont-path + $iconfont-name, $file-formats: eot woff ttf svg); 71 | 72 | 73 | -------------------------------------------------------------------------------- /scss/pack-picker.scss: -------------------------------------------------------------------------------- 1 | @import "bourbon/bourbon"; 2 | 3 | @import "picker"; 4 | -------------------------------------------------------------------------------- /scss/picker.scss: -------------------------------------------------------------------------------- 1 | .picker { 2 | // VERY IMPORTANT HERE!!! 3 | // This setting may disable the impact of transform setting in prarent node to fixed postion setting in 'container' 4 | position: relative; 5 | 6 | 7 | >.container { 8 | position: relative; 9 | box-sizing: border-box; 10 | -webkit-tap-highlight-color: rgba(0,0,0,0); 11 | z-index: 100; 12 | top: 1px; 13 | left: -10000px; 14 | //width: 100%; 15 | //height: 100%; 16 | @include transition(left 0ms cubic-bezier(0.23, 1, 0.32, 1) 450ms); 17 | //background-color: rgba(47, 22, 86, 0.79); 18 | 19 | @media screen and (max-width: 767px) { 20 | position: fixed; 21 | top: 0; 22 | left: -10000px; 23 | width: 100%; 24 | height: 100%; 25 | } 26 | 27 | &.table { 28 | display: table; 29 | } 30 | 31 | &.show { 32 | left: 0; 33 | @include transition(left 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms); 34 | 35 | .overlay { 36 | left: 0; 37 | } 38 | } 39 | 40 | .overlay { 41 | position: fixed; 42 | height: 100%; 43 | width: 100%; 44 | z-index: 9; 45 | top: 0; 46 | left: -10000px; 47 | opacity: 1; 48 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 49 | will-change: opacity; 50 | //background-color: rgba(0, 0, 0, 0.541176); 51 | @include transform(translateZ(0)); 52 | @include transition(left 0ms cubic-bezier(0.23, 1, 0.32, 1) 0ms, opacity 400ms cubic-bezier(0.23, 1, 0.32, 1) 0ms); 53 | 54 | @media screen and (max-width: 767px) { 55 | background-color: rgba(0, 0, 0, 0.25); 56 | } 57 | } 58 | 59 | .cell { 60 | display: table-cell; 61 | //vertical-align: middle; 62 | box-sizing: border-box; 63 | width: 100%; 64 | height: 100%; 65 | 66 | //@media screen and (max-width: 767px) { 67 | // vertical-align: bottom; 68 | //} 69 | } 70 | 71 | $popup-offset-y: 64px; 72 | $pupup-width: 20rem; 73 | $option-height: 3.4rem; 74 | $visible-num: 7; 75 | $options-half-height: ($visible-num - 1) / 2 * $option-height; 76 | $mobi-visible-num: 7; 77 | $mobi-options-top-height: 2 * $option-height; 78 | $mobi-options-bottom-height: ($mobi-visible-num - 3) * $option-height; 79 | 80 | .popup { 81 | position: absolute; 82 | box-sizing: border-box; 83 | -webkit-tap-highlight-color: rgba(0,0,0,0); 84 | @include transition(all 450ms cubic-bezier(0.23, 1, 0.32, 1)); 85 | //width: 75%; 86 | //max-width: 95%; 87 | margin: 0 auto; 88 | z-index: 10; 89 | font-size: 1.2rem; 90 | //color: #fff; 91 | //background-color: rgba(50, 50, 50, 0.96); 92 | opacity: 0; 93 | 94 | @media screen and (max-width: 767px) { 95 | bottom: 0; 96 | width: 100%; 97 | max-width: 100%; 98 | height: $option-height * $mobi-visible-num; 99 | @include transform( translate3d(0, $option-height * $mobi-visible-num, 0) ); 100 | } 101 | @media screen and (min-width: 768px) { 102 | height: $option-height * $visible-num; 103 | width: $pupup-width; 104 | @include transform( translate3d(0, -($popup-offset-y), 0) ); 105 | } 106 | 107 | &.show { 108 | opacity: 1; 109 | @include transform( translate3d(0, 0, 0) ); 110 | } 111 | 112 | &:after { 113 | content: ' '; 114 | clear: both; 115 | display: table; //key for clear 116 | } 117 | 118 | .list-wrap { 119 | float: left; 120 | width: 100%; 121 | height: 100%; 122 | overflow-x: hidden; 123 | overflow-y: auto; 124 | 125 | ul, li { 126 | list-style-type: none; 127 | margin: 0; 128 | padding: 0; 129 | } 130 | ul { 131 | display: block; 132 | width: 100%; 133 | margin-top: $options-half-height; 134 | margin-bottom: $options-half-height; 135 | 136 | @media screen and (max-width: 767px) { 137 | margin-top: $mobi-options-top-height; 138 | margin-bottom: $mobi-options-bottom-height; 139 | } 140 | } 141 | li { 142 | text-align: center; 143 | line-height: $option-height; 144 | font-size: 1.32rem; 145 | cursor: pointer; 146 | 147 | @media screen and (min-width: 768px) { 148 | &:hover { 149 | background-color: rgba(255, 210, 96, 0.33); 150 | } 151 | } 152 | } 153 | } 154 | 155 | >.cover { 156 | position: absolute; 157 | left: 0; 158 | right: 0; 159 | height: $options-half-height; 160 | //background-color: rgba(50, 50, 50, 0.72); 161 | box-sizing: border-box; 162 | z-index: 12; 163 | pointer-events: none; //IMPORTANT to let all events pass through 164 | 165 | &.upper { 166 | top: 0; 167 | //border-bottom: 1px solid rgba(85, 85, 85, 0.9); 168 | 169 | @media screen and (max-width: 767px) { 170 | height: $mobi-options-top-height; 171 | } 172 | } 173 | &.lower { 174 | bottom: 0; 175 | //border-top: 1px solid rgba(85, 85, 85, 0.9); 176 | 177 | @media screen and (max-width: 767px) { 178 | height: $mobi-options-bottom-height; 179 | } 180 | } 181 | } 182 | 183 | 184 | &.light { 185 | color: #666; 186 | background-color: rgba(255, 255, 255, 0.96); 187 | 188 | @media screen and (max-width: 767px) { 189 | border-top: 1px solid #ccc; 190 | box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.08); 191 | } 192 | @media screen and (min-width: 768px) { 193 | border: 1px solid #ccc; 194 | box-shadow: 0 1px 5px #ddd; 195 | } 196 | 197 | >.cover { 198 | background-color: rgba(240, 240, 240, 0.7); 199 | 200 | &.upper { 201 | border-bottom: 1px solid #ccc; 202 | } 203 | &.lower { 204 | border-top: 1px solid #ccc; 205 | } 206 | } 207 | } 208 | 209 | &.dark { 210 | color: #fff; 211 | background-color: rgba(50, 50, 50, 0.96); 212 | 213 | >.cover { 214 | background-color: rgba(50, 50, 50, 0.72); 215 | 216 | &.upper { 217 | border-bottom: 1px solid rgba(85, 85, 85, 0.9); 218 | } 219 | &.lower { 220 | border-top: 1px solid rgba(85, 85, 85, 0.9); 221 | } 222 | } 223 | } 224 | 225 | } //.popup 226 | 227 | } //.container 228 | 229 | 230 | } -------------------------------------------------------------------------------- /snapshots/mobile-form.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nickeljew/react-picker/b8cc2d7e7e66ecf40dfac18265815038b9d67779/snapshots/mobile-form.jpg -------------------------------------------------------------------------------- /snapshots/mobile-picker.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nickeljew/react-picker/b8cc2d7e7e66ecf40dfac18265815038b9d67779/snapshots/mobile-picker.jpg -------------------------------------------------------------------------------- /snapshots/pc-form.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nickeljew/react-picker/b8cc2d7e7e66ecf40dfac18265815038b9d67779/snapshots/pc-form.jpg -------------------------------------------------------------------------------- /snapshots/pc-picker-light.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nickeljew/react-picker/b8cc2d7e7e66ecf40dfac18265815038b9d67779/snapshots/pc-picker-light.jpg -------------------------------------------------------------------------------- /snapshots/pc-picker.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nickeljew/react-picker/b8cc2d7e7e66ecf40dfac18265815038b9d67779/snapshots/pc-picker.jpg -------------------------------------------------------------------------------- /src/picker.jsx: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * Month-Picker 5 | * 6 | * Properties: 7 | * @value: Default selected option value 8 | * @options: Options of the picker 9 | * @onChange: callback on changing selected option 10 | * @onShow: callback on calling show method 11 | * @onDismiss: callback on calling dismiss method 12 | * @onClickAway: callback on clicking area outside the picker panel 13 | * @width: width of the picker panel 14 | * @theme: theme setting of month-picker; 2 options (light/dark); default theme is light 15 | */ 16 | 17 | 18 | 19 | 20 | import React, { Component } from 'react' 21 | import PropTypes from 'prop-types' 22 | import ReactDOM from 'react-dom' 23 | import Tappable from 'react-tapper' 24 | import ViewPoint from 'es6-viewpoint' 25 | 26 | 27 | const isBrowser = (typeof window !== "undefined" && typeof document !== "undefined") 28 | 29 | 30 | export default class Picker extends Component { 31 | static propTypes = { 32 | value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]).isRequired 33 | , options: PropTypes.array.isRequired 34 | , onChange: PropTypes.func 35 | , onShow: PropTypes.func 36 | , onDismiss: PropTypes.func 37 | , onClickAway: PropTypes.func 38 | , width: PropTypes.string 39 | , theme: PropTypes.string 40 | } 41 | static defaultProps = { 42 | onChange(value, text, idx) {} 43 | , theme: 'light' 44 | } 45 | 46 | constructor(props, context) { 47 | super(props, context) 48 | 49 | this.state = { 50 | value: this.props.value 51 | , options: this.props.options 52 | , open: false 53 | , optionHeight: 0 54 | , _scrollStartTop: [] 55 | , _initValueIndexes: [] 56 | , _scrollTimer: undefined 57 | , closeable: false 58 | } 59 | 60 | this._handleOverlayTouchTap = this._handleOverlayTouchTap.bind(this) 61 | this._onPageScroll = this._onPageScroll.bind(this) 62 | this._onScroll = this._onScroll.bind(this) 63 | this._clickOnOption = this._clickOnOption.bind(this) 64 | } 65 | 66 | componentWillReceiveProps(nextProps){ 67 | //if ( Array.isArray(nextProps.value) ) { 68 | // nextProps.value.forEach((v, idx) => { 69 | // if (this.state.options[idx] && this.state.options[idx] !== nextProps.options[idx]) { 70 | // let node = this.refs['list-'+idx] //div, ReactDOM.findDOMNode( this.refs['list-'+idx] ) 71 | // node.scrollTop = this.state._scrollStartTop[idx] = 0 72 | // } 73 | // }) 74 | //} 75 | 76 | //fixed scrollTop when update props 77 | let values = nextProps.value 78 | , opArr = nextProps.options 79 | , preValues = this.state.value 80 | , preOpArr = this.state.options 81 | , opHeight = this.state.optionHeight 82 | if ( ! Array.isArray(values)) { 83 | values = [values] 84 | opArr = [opArr] 85 | preValues = [preValues] 86 | preOpArr = [preOpArr] 87 | } 88 | values.forEach((v, idx) => { 89 | if (values[idx] !== preValues[idx] || opArr[idx] !== preOpArr[idx]) { 90 | let ops = opArr[idx] 91 | , top = 0 92 | for (let oi = 0; oi < ops.length; oi++) { 93 | let opv = (typeof ops[oi] === 'string' || typeof ops[oi] === 'number') ? ops[oi] : ops[oi].value 94 | if (String(opv) === String(v)) { 95 | top = oi * opHeight 96 | break 97 | } 98 | } 99 | let node = this.refs['list-'+idx] //div, ReactDOM.findDOMNode( this.refs['list-'+idx] ) 100 | node.scrollTop = this.state._scrollStartTop[idx] = top 101 | } 102 | }) 103 | 104 | this.setState({ 105 | value: nextProps.value 106 | , options: nextProps.options 107 | }) 108 | } 109 | 110 | componentDidMount () { 111 | let op = this.refs['op-0-0'] 112 | , opHeight = 0 113 | if (op) { 114 | opHeight = this.state.optionHeight = ReactDOM.findDOMNode(op).clientHeight 115 | } 116 | this.state._initValueIndexes.forEach((vi, idx) => { 117 | if (vi > 0) { 118 | let node = this.refs['list-'+idx] //div, ReactDOM.findDOMNode( this.refs['list-'+idx] ) 119 | node.scrollTop = this.state._scrollStartTop[idx] = vi * opHeight 120 | } 121 | }) 122 | //window.addEventListener('scroll', this._onPageScroll) 123 | } 124 | 125 | componentWillUnmount () { 126 | //window.removeEventListener('scroll', this._onPageScroll) 127 | } 128 | 129 | value() { 130 | return this.state.value 131 | } 132 | 133 | render() { 134 | 135 | let values = this.state.value 136 | , __options = this.state.options 137 | if ( ! Array.isArray(values)) { 138 | values = [values] 139 | __options = [__options] 140 | } 141 | 142 | let initValueIndexes = [] 143 | let style = { 144 | width: (100 / __options.length) + '%' 145 | } 146 | let i = -1 //counter for __options, for it is an array or key-map object 147 | let lists = __options.map((options) => { 148 | if (!options) 149 | return 150 | i++ 151 | let j = -1 //counter for options, for it is an array or key-map object 152 | return ( 153 |
161 |
    162 | { 163 | options.map((op) => { 164 | j++ 165 | if (typeof op === 'string' || typeof op === 'number') { 166 | op = { 167 | text: op 168 | , value: op 169 | } 170 | } 171 | else if ((typeof op !== 'object') || !op.text) 172 | return 173 | if (typeof op.value !== 'string' && typeof op.value !== 'number') 174 | op.value = '' 175 | 176 | if (String(op.value) === String(values[i])) { 177 | initValueIndexes.push(j) 178 | } 179 | 180 | return ( 181 | 188 | {op.text} 189 | 190 | ) 191 | }) 192 | } 193 |
194 |
195 | ) 196 | }) 197 | 198 | this.state._initValueIndexes = initValueIndexes 199 | 200 | let popupStyle = {} 201 | if (this.props.width && ViewPoint && ViewPoint.width >= 768) { 202 | popupStyle.width = this.props.width 203 | } 204 | 205 | return ( 206 |
207 | {this.props.children} 208 |
209 | 210 |
211 |
212 | {lists} 213 |
214 |
215 |
216 |
217 |
218 |
219 | ) 220 | } 221 | 222 | dismiss() { 223 | if (this.state.closeable) { 224 | this._onDismiss() 225 | } 226 | } 227 | show() { 228 | // prevent rapid show/hide 229 | this._onShow() 230 | } 231 | _handleOverlayTouchTap() { 232 | if (this.state.closeable) { 233 | this._onDismiss() 234 | this.props.onClickAway && this.props.onClickAway() 235 | } 236 | } 237 | _onShow() { 238 | setTimeout(function(){ this.state.closeable = true }.bind(this), 250) 239 | this.setState({ open: true }) 240 | this.props.onShow && this.props.onShow() 241 | } 242 | _onDismiss() { 243 | this.setState({ open: false, loading: false }) 244 | this.props.onDismiss && this.props.onDismiss() 245 | } 246 | 247 | _onPageScroll(e) { 248 | } 249 | _onScroll(e) { 250 | let el = e.target 251 | , idx = parseInt(el.dataset ? el.dataset.id : el.getAttribute('data-id'), 10) 252 | , opHeight = this.state.optionHeight 253 | , scrollStartTop = this.state._scrollStartTop 254 | 255 | window.clearTimeout( this.state._scrollTimer ) 256 | this.state._scrollTimer = window.setTimeout( () => { 257 | if (typeof scrollStartTop[idx] !== 'number') 258 | scrollStartTop[idx] = 0 259 | if (scrollStartTop[idx] === el.scrollTop) 260 | return 261 | 262 | let scrollTop = el.scrollTop 263 | , mod = scrollTop % opHeight 264 | , percent = mod / opHeight 265 | 266 | let toLowerItem = () => { 267 | let diff = opHeight - mod 268 | scrollTop += diff 269 | el.scrollTop += diff 270 | } 271 | let toUpperItem = () => { 272 | scrollTop -= mod 273 | el.scrollTop -= mod 274 | } 275 | 276 | if (scrollTop > scrollStartTop[idx]) { 277 | percent > 0.46 ? toLowerItem() : toUpperItem() 278 | } 279 | else { 280 | percent < 0.64 ? toUpperItem() : toLowerItem() 281 | } 282 | scrollStartTop[idx] = scrollTop 283 | 284 | let opname = `op-${idx}-${scrollTop / opHeight}` 285 | let op = ReactDOM.findDOMNode( this.refs[opname] ).getAttribute('data-value') 286 | if (!op) 287 | return 288 | op = JSON.parse(op) 289 | 290 | let value = this.state.value 291 | if (Array.isArray(value)) { 292 | value[idx] = op.value 293 | } else { 294 | value = op.value 295 | } 296 | this.setState({ 297 | value: value 298 | }) 299 | this.props.onChange(op.value, op.text, idx) 300 | }, 250) 301 | } 302 | 303 | _clickOnOption(e) { 304 | let el = e.target 305 | , value = el.dataset ? el.dataset.id : el.getAttribute('data-id') 306 | if ( ! value ) 307 | return 308 | 309 | let arr = value.split('-') 310 | if (arr.length < 2) 311 | return 312 | 313 | let _list = this.refs['list-' + arr[0]] 314 | if (!_list) 315 | return 316 | let list = _list //div, ReactDOM.findDOMNode(_list) 317 | list.scrollTop = this.state.optionHeight * parseInt(arr[1], 10) 318 | } 319 | } 320 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const path = require('path') 4 | 5 | process.traceDeprecation = true 6 | 7 | module.exports = { 8 | entry: { 9 | demo: './examples/demo.jsx', 10 | //react: ['react', 'react-dom'], 11 | }, 12 | output: { 13 | path: path.resolve(__dirname, 'examples'), 14 | filename: '[name].js', 15 | //library: '[name]', 16 | //libraryTarget: 'commonjs2', 17 | }, 18 | resolve: { 19 | extensions: ['.js', '.jsx', '.es6'], 20 | modules: [path.resolve(__dirname, "src"), "node_modules"], 21 | }, 22 | externals: { 23 | react: 'React', 24 | 'react-dom': 'ReactDOM', 25 | 'prop-types': 'PropTypes', 26 | }, 27 | module: { 28 | rules: [ 29 | { 30 | test: /\.(jsx|es6)$/, 31 | exclude: path.resolve(__dirname, 'node_modules'), 32 | use: [ 33 | { 34 | loader: 'babel-loader', 35 | options: { 36 | // comments: false, 37 | sourceMaps: true, 38 | }, 39 | }, 40 | ], 41 | }, 42 | ], 43 | }, 44 | plugins: [], 45 | target: 'web', 46 | mode: 'development', 47 | } 48 | --------------------------------------------------------------------------------