├── .babelrc ├── .gitignore ├── docs ├── favicon.ico ├── favicon.png ├── click_n_hold.gif ├── anim.css ├── index.html ├── git.svg ├── main.css ├── app.js └── bs12.css ├── example ├── favicon.ico ├── favicon.png ├── anim.css ├── index.html ├── git.svg ├── main.css ├── app.js └── bs12.css ├── .eslintrc.js ├── webpack.config.js ├── LICENSE ├── package.json ├── .eslintrc ├── README.md ├── src └── ClickNHold.jsx └── dist └── main.js /.babelrc: -------------------------------------------------------------------------------- 1 | { "presets": ["es2015","react"] } 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | tests/ 2 | node_modules/ 3 | npm-debug.log 4 | 5 | node_modules/ 6 | .idea 7 | *.log -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sonsoleslp/react-click-n-hold/HEAD/docs/favicon.ico -------------------------------------------------------------------------------- /docs/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sonsoleslp/react-click-n-hold/HEAD/docs/favicon.png -------------------------------------------------------------------------------- /example/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sonsoleslp/react-click-n-hold/HEAD/example/favicon.ico -------------------------------------------------------------------------------- /example/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sonsoleslp/react-click-n-hold/HEAD/example/favicon.png -------------------------------------------------------------------------------- /docs/click_n_hold.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sonsoleslp/react-click-n-hold/HEAD/docs/click_n_hold.gif -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | var OFF = 0, WARN = 1, ERROR = 2; 2 | 3 | module.exports = exports = { 4 | env: { 5 | 'es6': true, // We are writing ES6 code 6 | 'browser': true, // for the browser 7 | 'commonjs': true // and use require() for stylesheets 8 | }, 9 | ecmaFeatures: { 10 | 'jsx': true, 11 | 'modules': true 12 | }, 13 | plugins: [ 14 | 'react' 15 | ], -------------------------------------------------------------------------------- /docs/anim.css: -------------------------------------------------------------------------------- 1 | 2 | @-webkit-keyframes fill { 3 | to { 4 | background-size:100% 0; 5 | } 6 | } 7 | 8 | @keyframes fill { 9 | to { 10 | background-size:100% 0; 11 | } 12 | } 13 | 14 | 15 | .cnh_holding button{ 16 | background: -webkit-linear-gradient( white , white) rgb(255,215,235) no-repeat 0 0; 17 | background: linear-gradient( white , white) rgb(255,215,235) no-repeat 0 0; 18 | mix-blend-mode: multiply; 19 | background-size: 100% 100%; 20 | -webkit-animation: fill 2s forwards; 21 | animation: fill 2s forwards; 22 | } -------------------------------------------------------------------------------- /example/anim.css: -------------------------------------------------------------------------------- 1 | 2 | @-webkit-keyframes fill { 3 | to { 4 | background-size:100% 0; 5 | } 6 | } 7 | 8 | @keyframes fill { 9 | to { 10 | background-size:100% 0; 11 | } 12 | } 13 | 14 | 15 | .cnh_holding button{ 16 | background: -webkit-linear-gradient( white , white) rgb(255,215,235) no-repeat 0 0; 17 | background: linear-gradient( white , white) rgb(255,215,235) no-repeat 0 0; 18 | mix-blend-mode: multiply; 19 | background-size: 100% 100%; 20 | -webkit-animation: fill 2s forwards; 21 | animation: fill 2s forwards; 22 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | 3 | module.exports = { 4 | entry: './example/app.js', 5 | output: { 6 | path: './example', 7 | filename: 'bundle.js' 8 | }, 9 | 10 | module: { 11 | /*preLoaders: [ 12 | // Javascript 13 | { test: /\.jsx?$/, loader: 'eslint', exclude: /node_modules/ } 14 | ],*/ 15 | loaders: [ 16 | 17 | { 18 | test: /\.(jsx|js)$/, 19 | exclude: /node_modules/, 20 | loader: 'babel', 21 | query: { 22 | presets: ['es2015', 'react'] 23 | } 24 | } 25 | ] 26 | }, 27 | eslint: { 28 | failOnWarning: false, 29 | failOnError: true 30 | }, 31 | 32 | }; 33 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React click-n-hold 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React click-n-hold 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Sonsoles 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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-click-n-hold", 3 | "version": "1.0.6", 4 | "description": "Long press event for react. Click and hold wrapper component.", 5 | "main": "dist/main.js", 6 | "author": "sonsoleslp ", 7 | "license": "MIT", 8 | "homepage": "http://sonsoleslp.github.io/react-click-n-hold/", 9 | "keywords": [ 10 | "react-component", 11 | "react", 12 | "long-press", 13 | "click", 14 | "hold", 15 | "event" 16 | ], 17 | "dependencies": { 18 | "react": "^0.14.7", 19 | "react-dom": "^0.14.7" 20 | }, 21 | "repository": { 22 | "type": "git", 23 | "url": "https://github.com/sonsoleslp/react-click-n-hold.git" 24 | }, 25 | "scripts": { 26 | "dev": "webpack && webpack-dev-server --inline --content-base ./example/", 27 | "start": "npm run dev", 28 | "build": "babel src/ClickNHold.jsx > dist/main.js", 29 | "prod": "webpack" 30 | }, 31 | "devDependencies": { 32 | "babel": "^6.5.2", 33 | "babel-cli": "^6.5.1", 34 | "babel-core": "^6.5.2", 35 | "babel-loader": "^6.2.3", 36 | "babel-preset-es2015": "^6.5.0", 37 | "babel-preset-react": "^6.5.0", 38 | "eslint-loader": "^1.9.0", 39 | "webpack": "^1.12.13", 40 | "webpack-dev-server": "^1.14.1" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | /* 3 | * ENVIRONMENTS 4 | * ================= 5 | */ 6 | 7 | // Define globals exposed by modern browsers. 8 | "browser": true, 9 | 10 | // Define globals exposed by jQuery. 11 | "jquery": true, 12 | 13 | // Define globals exposed by Node.js. 14 | "node": true, 15 | 16 | // Allow ES6. 17 | "esversion": 6, 18 | 19 | /* 20 | * ENFORCING OPTIONS 21 | * ================= 22 | */ 23 | 24 | // Force all variable names to use either camelCase style or UPPER_CASE 25 | // with underscores. 26 | "camelcase": true, 27 | 28 | // Prohibit use of == and != in favor of === and !==. 29 | "eqeqeq": true, 30 | 31 | // Enforce tab width of 2 spaces. 32 | "indent": 2, 33 | 34 | // Prohibit use of a variable before it is defined. 35 | "latedef": true, 36 | 37 | // Enforce line length to 100 characters 38 | "maxlen": 100, 39 | 40 | // Require capitalized names for constructor functions. 41 | "newcap": true, 42 | 43 | // Enforce use of single quotation marks for strings. 44 | "quotmark": "single", 45 | 46 | // Enforce placing 'use strict' at the top function scope 47 | "strict": true, 48 | 49 | // Prohibit use of explicitly undeclared variables. 50 | "undef": true, 51 | 52 | // Warn when variables are defined but never used. 53 | "unused": true, 54 | 55 | /* 56 | * RELAXING OPTIONS 57 | * ================= 58 | */ 59 | 60 | // Suppress warnings about == null comparisons. 61 | "eqnull": true 62 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | react-click-n-hold 2 | ================== 3 | 4 | by @sonsoleslp 5 | -------------- 6 | 7 | Long press event for react. Click and hold wrapper component. 8 | 9 | Detect when a DOM element has been pressed for the amount of time you specify. 10 | http://sonsoleslp.github.io/react-click-n-hold/ 11 | 12 | ![react-click-n-hold](https://raw.githubusercontent.com/sonsoleslp/sonsoleslp.github.io/master/react-click-n-hold/click_n_hold.gif) 13 | 14 | 15 | 16 | Example usage 17 | ------------- 18 | First install the component 19 | 20 | npm install --save react-click-n-hold 21 | 22 | Then use the component in your app 23 | 24 | import React from 'react'; 25 | import ClickNHold from 'react-click-n-hold'; 26 | 27 | export default class Example extends React.Component { 28 | start(e){ 29 | console.log('START'); 30 | } 31 | 32 | end(e, enough){ 33 | console.log('END'); 34 | console.log(enough ? 'Click released after enough time': 'Click released too soon'); 35 | } 36 | 37 | clickNHold(e){ 38 | console.log('CLICK AND HOLD'); 39 | } 40 | 41 | render(){ 42 | return ( 43 | // Click release callback 48 | 49 | 50 | ); 51 | } 52 | } 53 | 54 | > **Styling animation:** 55 | > - This component does not provide css for pressing effects 56 | > - However, during press, .cnh_holding is applied to the wrapper, allowing the user to animate the transition using css 57 | > - Below is an example of styling; the one used in the demo 58 | 59 | 60 |   61 | @-webkit-keyframes fill { 62 |   to { 63 |    background-size: 100% 0; 64 |   } 65 | } 66 | 67 | @keyframes fill { 68 |   to { 69 |    background-size: 100% 0; 70 |   } 71 | } 72 | 73 | //The wrapper has the .cnh_holding class while the button is being pressed 74 | 75 | .cnh_holding button { 76 |   background: -webkit-linear-gradient( white , white) rgb(255,215,235) no-repeat 0 0; 77 |   background: linear-gradient( white , white) rgb(255,215,235) no-repeat 0 0; 78 |   mix-blend-mode: multiply; 79 |   background-size: 100% 100%; 80 |   -webkit-animation: fill 2s forwards; 81 |   animation: fill 2s forwards; 82 | } 83 | 84 | 85 | Run locally 86 | ------------- 87 | 88 | npm install react-click-n-hold 89 | npm run dev 90 | 91 | Open localhost:8080 92 | -------------------------------------------------------------------------------- /docs/git.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /example/git.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /src/ClickNHold.jsx: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | 3 | export default class ClickNHold extends Component { 4 | 5 | constructor(props) { 6 | super(props); 7 | this.state = { 8 | holding: false, 9 | start: 0, 10 | ended: 'begin', 11 | clickEvent: null 12 | } 13 | 14 | this._timer = null; 15 | this._unmounted = false; 16 | 17 | this.start = this.start.bind(this); 18 | this.end = this.end.bind(this); 19 | this.timeout = this.timeout.bind(this); 20 | this.clickCapture = this.clickCapture.bind(this); 21 | } 22 | 23 | componentWillUnmount() { 24 | this._unmounted = true; 25 | clearTimeout(this._timer); 26 | this._timer = null; 27 | } 28 | 29 | /* componentDidUpdate(nextState) { 30 | if (this.state.holding !== nextState.holding) { 31 | if (this.state.holding === false && this.state.ended === false) { 32 | document.documentElement.addEventListener('mouseup', this.end); 33 | } 34 | } 35 | }*/ 36 | 37 | /*Start callback*/ 38 | start(e){ 39 | let ended = this.state.ended; 40 | let start = Date.now() 41 | let eCopy = Object.assign({}, e); 42 | eCopy.type = "ClickNHold"; 43 | this.setState({start: start, holding: true, ended: false, clickEvent:eCopy, isEnough:false}); 44 | let rightNumber = this.props.time && this.props.time > 0; 45 | let time = rightNumber ? this.props.time : 2; 46 | if (!rightNumber) {console.warn("You have specified an unvalid time prop for ClickNHold. You need to specify a number > 0. Default time is 2.")} 47 | if (ended) { 48 | this._timer = setTimeout(function(){this.timeout(start)}.bind(this), 49 | time*1000+1); 50 | } 51 | if (this.props.onStart) { 52 | this.props.onStart(e); 53 | } 54 | document.documentElement.addEventListener('mouseup', this.end); 55 | 56 | } 57 | 58 | /*End callback*/ 59 | end(e) { 60 | document.documentElement.removeEventListener('mouseup', this.end); 61 | if(this.state.ended || this._unmounted) { 62 | return false; 63 | } 64 | let endTime = Date.now(); //End time 65 | let minDiff = this.props.time * 1000; // In seconds 66 | let startTime = this.state.start; // Start time 67 | let diff = endTime - startTime; // Time difference 68 | let isEnough = diff >= minDiff; // It has been held for enough time 69 | 70 | this.setState({holding: false, ended: true, clickEvent:null, isEnough:isEnough}); 71 | if (this.props.onEnd){ 72 | this.props.onEnd(e, isEnough); 73 | } 74 | } 75 | 76 | clickCapture(e) { 77 | if (this.state.isEnough) 78 | e.stopPropagation(); 79 | } 80 | 81 | /*Timeout callback*/ 82 | timeout(start){ 83 | if (!this.state.ended && start === this.state.start){ 84 | if(this.props.onClickNHold){ 85 | this.props.onClickNHold(start, this.state.clickEvent); 86 | this.setState({ holding: false}); 87 | return; 88 | } 89 | } 90 | } 91 | 92 | render() { 93 | let classList = this.props.className ? (this.props.className +' '):' '; 94 | classList += this.state.holding ? 'cnh_holding ':''; 95 | classList += this.state.ended ? 'cnh_ended ':''; 96 | return ( 97 |
105 | { 106 | typeof this.props.children === 'object' 107 | ? React.cloneElement(this.props.children, { ref: (n) => this.node = n }) 108 | : null 109 | } 110 |
); 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /docs/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | overflow-left: hidden; 3 | min-height: 100%; 4 | } 5 | 6 | * { 7 | font-family: 'Roboto', sans-serif; 8 | font-size: 1em; 9 | height: 100%; 10 | margin: 0 !important; 11 | padding: 0 !important; 12 | } 13 | 14 | input { 15 | height: auto; 16 | } 17 | 18 | li { 19 | list-style: none; 20 | height: auto; 21 | font-size: 24px; 22 | 23 | } 24 | 25 | .container { 26 | width: 100%; 27 | height: calc(100% - 26px); 28 | } 29 | 30 | ul { 31 | padding: 100px !important; 32 | overflow: auto; 33 | width: 100%; 34 | } 35 | 36 | .middle{ 37 | line-height: 100%; 38 | text-align: center; 39 | } 40 | 41 | .middleAligned { 42 | max-width: 100%; 43 | position:absolute; 44 | left:50%; 45 | top:50%; 46 | margin:auto !important; 47 | height: auto; 48 | transform: translate(-50%,-50%); 49 | -moz-transform: translate(-50%,-50%); 50 | -webkit-transform: translate(-50%,-50%); 51 | } 52 | 53 | 54 | button { 55 | white-space: nowrap; 56 | color: pink; 57 | height: 100px; 58 | background-color: white; 59 | border-style: solid; 60 | border-radius: 3px; 61 | border-width: 3px; 62 | text-transform: uppercase; 63 | font-weight: bolder; 64 | margin:auto !important; 65 | font-size: 2em; 66 | line-height: 100px; 67 | padding: 0px 30px !important; 68 | vertical-align: middle; 69 | border-color: pink !important; 70 | outline: none; 71 | box-shadow: none !important;cursor:pointer; 72 | 73 | 74 | } 75 | 76 | button:focus:active:hover{ 77 | cursor: pointer; 78 | border-radius: 3px; 79 | border-width: 3px; 80 | border-color: pink !important; 81 | outline: none; 82 | box-shadow: none !important; 83 | } 84 | 85 | form { 86 | color: #444; 87 | } 88 | 89 | 90 | /*Radio*/ 91 | 92 | input[type=number] { 93 | -moz-appearance: textfield; 94 | appearance: textfield; 95 | margin: 0; 96 | } 97 | 98 | input[type=number]::-webkit-inner-spin-button, 99 | input[type=number]::-webkit-outer-spin-button { 100 | -webkit-appearance: none; 101 | margin: 0; 102 | } 103 | 104 | #timeinput { 105 | width: 40px; 106 | outline: none; 107 | border: none; 108 | border-bottom: 3px solid rgba(141, 181, 128, 1);; 109 | color: rgba(141, 181, 128, 1);; 110 | font-family: Roboto; 111 | font-size: 20px; 112 | font-weight: bolder; 113 | text-align: center; 114 | margin-right: 4px !important; 115 | } 116 | 117 | #timelabel { 118 | text-align: center; 119 | padding-right: 4px !important; 120 | color: rgba(141, 181, 128, 1); 121 | font-family: Roboto; 122 | font-size: 20px; 123 | font-weight: bolder; 124 | } 125 | 126 | #timeunits { 127 | text-align: center; 128 | padding-left: 4px !important; 129 | color: rgba(141, 181, 128, 1); 130 | font-family: Roboto; 131 | font-size: 20px; 132 | font-weight: bolder; 133 | } 134 | 135 | #timeinput:hover:,#timeinput:active, #timeinput:focus{ 136 | outline: none; 137 | border: none; 138 | } 139 | .left { 140 | float:left; 141 | } 142 | .dot { 143 | vertical-align: middle; 144 | position:relative; 145 | float:right; 146 | cursor: pointer; 147 | width: 20px; 148 | margin: 3px !important; 149 | height: 20px; 150 | display: inline-block; 151 | border-radius: 20px; 152 | background-color: pink; 153 | opacity: 0.4; 154 | color:transparent; 155 | -webkit-transition: all 2s; /* Safari */ 156 | transition: all 2s; 157 | } 158 | .dot:hover { 159 | border: 4px solid white; 160 | } 161 | 162 | .dotselected { 163 | opacity: 1; 164 | } 165 | 166 | #code { 167 | 168 | 169 | } 170 | 171 | #css_code { 172 | padding-top: 40px !important; 173 | } 174 | 175 | .pre { 176 | background-color: #eeeeee; 177 | border-radius: 10px; 178 | padding: 40px !important; 179 | padding-top: 60px !important; 180 | line-height: 25px; 181 | font-size: 20px; 182 | color:rgba(141, 181, 128, 1); 183 | text-align: left; 184 | width: 60%; 185 | height: auto !important; 186 | margin: auto !important; 187 | } 188 | } 189 | .alignLeft { 190 | text-align: left; 191 | } 192 | .b {color: pink;} 193 | .g {color: rgba(126, 137, 135, 1);} 194 | .jsx {color: #db7093;} 195 | .com {color: #777;} 196 | h3 { 197 | 198 | line-height: 50px; 199 | height:50px; 200 | color: #999; 201 | text-transform: uppercase; 202 | font-size: 2em; 203 | } 204 | #anim { 205 | margin-top: -25px !important; 206 | 207 | } 208 | 209 | .myCol { 210 | text-align: center; 211 | min-height: 100%; 212 | height:auto; 213 | } 214 | 215 | @media screen and (max-width: 700px) { 216 | .pre { 217 | width:90%; 218 | } 219 | } 220 | 221 | .down { 222 | cursor: pointer; 223 | font-size: 1.3em; 224 | height: 1em; 225 | display:block; 226 | line-height: 1.2em; 227 | color:rgba(126, 137, 135, 0.6); 228 | text-decoration: none !important; 229 | } 230 | .down a { 231 | color:rgba(126, 137, 135, 0.6); 232 | text-decoration: none !important; 233 | } 234 | 235 | .up { 236 | font-size: 1.2em; 237 | 238 | display:block; 239 | line-height: 1.2em; 240 | color:rgba(126, 137, 135, 0.6); 241 | text-decoration: none !important; 242 | } 243 | 244 | h1 { 245 | font-size: 2.6em; 246 | color: pink; 247 | line-height: 50px; 248 | height: auto; 249 | } -------------------------------------------------------------------------------- /example/main.css: -------------------------------------------------------------------------------- 1 | html { 2 | overflow-left: hidden; 3 | min-height: 100%; 4 | } 5 | 6 | * { 7 | font-family: 'Roboto', sans-serif; 8 | font-size: 1em; 9 | height: 100%; 10 | margin: 0 !important; 11 | padding: 0 !important; 12 | } 13 | 14 | input { 15 | height: auto; 16 | } 17 | 18 | li { 19 | list-style: none; 20 | height: auto; 21 | font-size: 24px; 22 | 23 | } 24 | 25 | .container { 26 | width: 100%; 27 | height: calc(100% - 26px); 28 | } 29 | 30 | ul { 31 | padding: 100px !important; 32 | overflow: auto; 33 | width: 100%; 34 | } 35 | 36 | .middle{ 37 | line-height: 100%; 38 | text-align: center; 39 | } 40 | 41 | .middleAligned { 42 | max-width: 100%; 43 | position:absolute; 44 | left:50%; 45 | top:50%; 46 | margin:auto !important; 47 | height: auto; 48 | transform: translate(-50%,-50%); 49 | -moz-transform: translate(-50%,-50%); 50 | -webkit-transform: translate(-50%,-50%); 51 | } 52 | 53 | 54 | button { 55 | white-space: nowrap; 56 | color: pink; 57 | height: 100px; 58 | background-color: white; 59 | border-style: solid; 60 | border-radius: 3px; 61 | border-width: 3px; 62 | text-transform: uppercase; 63 | font-weight: bolder; 64 | margin:auto !important; 65 | font-size: 2em; 66 | line-height: 100px; 67 | padding: 0px 30px !important; 68 | vertical-align: middle; 69 | border-color: pink !important; 70 | outline: none; 71 | box-shadow: none !important;cursor:pointer; 72 | 73 | 74 | } 75 | 76 | button:focus:active:hover{ 77 | cursor: pointer; 78 | border-radius: 3px; 79 | border-width: 3px; 80 | border-color: pink !important; 81 | outline: none; 82 | box-shadow: none !important; 83 | } 84 | 85 | form { 86 | color: #444; 87 | } 88 | 89 | 90 | /*Radio*/ 91 | 92 | input[type=number] { 93 | -moz-appearance: textfield; 94 | appearance: textfield; 95 | margin: 0; 96 | } 97 | 98 | input[type=number]::-webkit-inner-spin-button, 99 | input[type=number]::-webkit-outer-spin-button { 100 | -webkit-appearance: none; 101 | margin: 0; 102 | } 103 | 104 | #timeinput { 105 | width: 40px; 106 | outline: none; 107 | border: none; 108 | border-bottom: 3px solid rgba(141, 181, 128, 1);; 109 | color: rgba(141, 181, 128, 1);; 110 | font-family: Roboto; 111 | font-size: 20px; 112 | font-weight: bolder; 113 | text-align: center; 114 | margin-right: 4px !important; 115 | } 116 | 117 | #timelabel { 118 | text-align: center; 119 | padding-right: 4px !important; 120 | color: rgba(141, 181, 128, 1); 121 | font-family: Roboto; 122 | font-size: 20px; 123 | font-weight: bolder; 124 | } 125 | 126 | #timeunits { 127 | text-align: center; 128 | padding-left: 4px !important; 129 | color: rgba(141, 181, 128, 1); 130 | font-family: Roboto; 131 | font-size: 20px; 132 | font-weight: bolder; 133 | } 134 | 135 | #timeinput:hover:,#timeinput:active, #timeinput:focus{ 136 | outline: none; 137 | border: none; 138 | } 139 | .left { 140 | float:left; 141 | } 142 | .dot { 143 | vertical-align: middle; 144 | position:relative; 145 | float:right; 146 | cursor: pointer; 147 | width: 20px; 148 | margin: 3px !important; 149 | height: 20px; 150 | display: inline-block; 151 | border-radius: 20px; 152 | background-color: pink; 153 | opacity: 0.4; 154 | color:transparent; 155 | -webkit-transition: all 2s; /* Safari */ 156 | transition: all 2s; 157 | } 158 | .dot:hover { 159 | border: 4px solid white; 160 | } 161 | 162 | .dotselected { 163 | opacity: 1; 164 | } 165 | 166 | #code { 167 | 168 | 169 | } 170 | 171 | #css_code { 172 | padding-top: 40px !important; 173 | } 174 | 175 | .pre { 176 | background-color: #eeeeee; 177 | border-radius: 10px; 178 | padding: 40px !important; 179 | padding-top: 60px !important; 180 | line-height: 25px; 181 | font-size: 20px; 182 | color:rgba(141, 181, 128, 1); 183 | text-align: left; 184 | width: 60%; 185 | height: auto !important; 186 | margin: auto !important; 187 | } 188 | } 189 | .alignLeft { 190 | text-align: left; 191 | } 192 | .b {color: pink;} 193 | .g {color: rgba(126, 137, 135, 1);} 194 | .jsx {color: #db7093;} 195 | .com {color: #777;} 196 | h3 { 197 | 198 | line-height: 50px; 199 | height:50px; 200 | color: #999; 201 | text-transform: uppercase; 202 | font-size: 2em; 203 | } 204 | #anim { 205 | margin-top: -25px !important; 206 | 207 | } 208 | 209 | .myCol { 210 | text-align: center; 211 | min-height: 100%; 212 | height:auto; 213 | } 214 | 215 | @media screen and (max-width: 700px) { 216 | .pre { 217 | width:90%; 218 | } 219 | } 220 | 221 | .down { 222 | cursor: pointer; 223 | font-size: 1.3em; 224 | height: 1em; 225 | display:block; 226 | line-height: 1.2em; 227 | color:rgba(126, 137, 135, 0.6); 228 | text-decoration: none !important; 229 | } 230 | .down a { 231 | color:rgba(126, 137, 135, 0.6); 232 | text-decoration: none !important; 233 | } 234 | 235 | .up { 236 | font-size: 1.2em; 237 | 238 | display:block; 239 | line-height: 1.2em; 240 | color:rgba(126, 137, 135, 0.6); 241 | text-decoration: none !important; 242 | } 243 | 244 | h1 { 245 | font-size: 2.6em; 246 | color: pink; 247 | line-height: 50px; 248 | height: auto; 249 | } -------------------------------------------------------------------------------- /dist/main.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, "__esModule", { 4 | value: true 5 | }); 6 | 7 | var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; 8 | 9 | var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 10 | 11 | var _react = require('react'); 12 | 13 | var _react2 = _interopRequireDefault(_react); 14 | 15 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 16 | 17 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 18 | 19 | function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 20 | 21 | function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 22 | 23 | var ClickNHold = function (_Component) { 24 | _inherits(ClickNHold, _Component); 25 | 26 | function ClickNHold(props) { 27 | _classCallCheck(this, ClickNHold); 28 | 29 | var _this = _possibleConstructorReturn(this, (ClickNHold.__proto__ || Object.getPrototypeOf(ClickNHold)).call(this, props)); 30 | 31 | _this.state = { 32 | holding: false, 33 | start: 0, 34 | ended: 'begin', 35 | clickEvent: null 36 | }; 37 | 38 | _this._timer = null; 39 | _this._unmounted = false; 40 | 41 | _this.start = _this.start.bind(_this); 42 | _this.end = _this.end.bind(_this); 43 | _this.timeout = _this.timeout.bind(_this); 44 | _this.clickCapture = _this.clickCapture.bind(_this); 45 | return _this; 46 | } 47 | 48 | _createClass(ClickNHold, [{ 49 | key: 'componentWillUnmount', 50 | value: function componentWillUnmount() { 51 | this._unmounted = true; 52 | clearTimeout(this._timer); 53 | this._timer = null; 54 | } 55 | 56 | /* componentDidUpdate(nextState) { 57 | if (this.state.holding !== nextState.holding) { 58 | if (this.state.holding === false && this.state.ended === false) { 59 | document.documentElement.addEventListener('mouseup', this.end); 60 | } 61 | } 62 | }*/ 63 | 64 | /*Start callback*/ 65 | 66 | }, { 67 | key: 'start', 68 | value: function start(e) { 69 | var ended = this.state.ended; 70 | var start = Date.now(); 71 | var eCopy = Object.assign({}, e); 72 | eCopy.type = "ClickNHold"; 73 | this.setState({ start: start, holding: true, ended: false, clickEvent: eCopy, isEnough: false }); 74 | var rightNumber = this.props.time && this.props.time > 0; 75 | var time = rightNumber ? this.props.time : 2; 76 | if (!rightNumber) { 77 | console.warn("You have specified an unvalid time prop for ClickNHold. You need to specify a number > 0. Default time is 2."); 78 | } 79 | if (ended) { 80 | this._timer = setTimeout(function () { 81 | this.timeout(start); 82 | }.bind(this), time * 1000 + 1); 83 | } 84 | if (this.props.onStart) { 85 | this.props.onStart(e); 86 | } 87 | document.documentElement.addEventListener('mouseup', this.end); 88 | } 89 | 90 | /*End callback*/ 91 | 92 | }, { 93 | key: 'end', 94 | value: function end(e) { 95 | document.documentElement.removeEventListener('mouseup', this.end); 96 | if (this.state.ended || this._unmounted) { 97 | return false; 98 | } 99 | var endTime = Date.now(); //End time 100 | var minDiff = this.props.time * 1000; // In seconds 101 | var startTime = this.state.start; // Start time 102 | var diff = endTime - startTime; // Time difference 103 | var isEnough = diff >= minDiff; // It has been held for enough time 104 | 105 | this.setState({ holding: false, ended: true, clickEvent: null, isEnough: isEnough }); 106 | if (this.props.onEnd) { 107 | this.props.onEnd(e, isEnough); 108 | } 109 | } 110 | }, { 111 | key: 'clickCapture', 112 | value: function clickCapture(e) { 113 | if (this.state.isEnough) e.stopPropagation(); 114 | } 115 | 116 | /*Timeout callback*/ 117 | 118 | }, { 119 | key: 'timeout', 120 | value: function timeout(start) { 121 | if (!this.state.ended && start === this.state.start) { 122 | if (this.props.onClickNHold) { 123 | this.props.onClickNHold(start, this.state.clickEvent); 124 | this.setState({ holding: false }); 125 | return; 126 | } 127 | } 128 | } 129 | }, { 130 | key: 'render', 131 | value: function render() { 132 | var _this2 = this; 133 | 134 | var classList = this.props.className ? this.props.className + ' ' : ' '; 135 | classList += this.state.holding ? 'cnh_holding ' : ''; 136 | classList += this.state.ended ? 'cnh_ended ' : ''; 137 | return _react2.default.createElement( 138 | 'div', 139 | { style: this.props.style, 140 | className: classList, 141 | onMouseDown: this.start, 142 | onTouchStart: this.start, 143 | onMouseUp: this.end, 144 | onClickCapture: this.clickCapture, 145 | onTouchCancel: this.end, 146 | onTouchEnd: this.end }, 147 | _typeof(this.props.children) === 'object' ? _react2.default.cloneElement(this.props.children, { ref: function ref(n) { 148 | return _this2.node = n; 149 | } }) : null 150 | ); 151 | } 152 | }]); 153 | 154 | return ClickNHold; 155 | }(_react.Component); 156 | 157 | exports.default = ClickNHold; 158 | 159 | -------------------------------------------------------------------------------- /docs/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import ClickNHold from '../src/ClickNHold.jsx'; 4 | 5 | 6 | export default class App extends React.Component { 7 | constructor(props) { 8 | super(props); 9 | this.state = { 10 | events:[], 11 | time:2, 12 | page: 1 13 | } 14 | } 15 | 16 | render() { 17 | return (
18 | {this.setState({page:2})}}>2 19 | this.setState({page:1})}>1 20 | 21 |
22 |
23 |
24 |

react-click-n-hold




25 | Long press event for react. Click and hold wrapper component. 26 |

27 | this.setState({events: [...this.state.events, {color:'rgba(194, 207, 178, 1)', event:'START'}]})} 30 | onClickNHold={(e)=>{this.setState({events: [...this.state.events, {color: 'rgba(250, 175, 190, 1)', event:('CLICK AND HOLD')}]})}} 31 | onEnd={(e, enough)=>this.setState({events: [...this.state.events, {color:'rgba(126, 137, 135, 1)', event:('END ' + (enough ?'enough time':'too soon'))}]})}> 32 | 33 | 34 |
35 |

36 | Time 37 | { 38 | let time = this.state.time; 39 | if(e.target.value && !isNaN(e.target.value) && e.target.value > 0){ 40 | time = e.target.value 41 | } 42 | this.setState({time: time}); 43 | var sheet = document.getElementsByTagName("style")[0]; 44 | sheet.innerHTML = ".cnh_holding button { -webkit-animation: fill " + e.target.value + "s forwards infinite; animation: fill " + e.target.value + "s forward infinite;}"; 45 | }}/> 46 | s 47 |


48 | See this project on Github 49 | this.setState({page:2})}>Example usage 50 | 51 | 52 |
53 | 54 |
55 |
56 |
57 |
    58 | {this.state.events.map((ev, index)=>{ 59 | 60 | return(
  • {ev.event}
    • ); 61 | })} 62 |
63 |
64 | 65 |
66 |
67 |
68 |

Usage Example

69 |

70 | 71 | import React from 'react';
72 | import ClickNHold from 'react-click-n-hold';
73 | 74 | export default class Example extends React.Component {
75 |   start(e){
76 | 77 |    console.log('START');
78 | 79 |  }
80 |   end(e, enough){
81 | 82 |    console.log('END');
83 |    console.log(enough ? 'Click released after enough time': 'Click released too soon');
84 | 85 |  }
86 |   clickNHold(e){
87 | 88 |    console.log('CLICK AND HOLD');
89 | 90 |  }
91 |   render(){
92 |    return (
93 |     <ClickNHold
94 |      time={2}
95 |      onStart={this.start}
96 |      onClickNHold={this.clickNHold}
97 |      onEnd={this.end} >
98 |      <button>Click and hold</button>
99 |     </ClickNHold>
 100 |    );
101 |   }
102 | }
103 |

104 |
105 |
106 |

Animation Example

107 |


108 | @-webkit-keyframes fill {
109 |   to {
110 |    background-size: 100% 0;
111 |   }
112 | }
113 |
114 | @keyframes fill {
115 |   to {
116 |    background-size: 100% 0;
117 |   }
118 | }
 119 |
120 | //The wrapper has the .cnh_holding class while the button is being pressed
 121 | .cnh_holding button {
 122 |   background: -webkit-linear-gradient( white , white) rgb(255,215,235) no-repeat 0 0;
123 |   background: linear-gradient( white , white) rgb(255,215,235) no-repeat 0 0;
124 |   mix-blend-mode: multiply;
125 |   background-size: 100% 100%;
126 |   -webkit-animation: fill 2s forwards;
127 |   animation: fill 2s forwards;
128 | }
 129 |
130 |

131 |
132 |
133 | 134 |
); 135 | } 136 | 137 | componentDidUpdate(){ 138 | let list = document.getElementById('eventList'); 139 | list.scrollTop = list.scrollHeight; 140 | } 141 | 142 | componentDidMount(){ 143 | var sheet = document.createElement('style'); 144 | sheet.innerHTML = ".cnh_holding button { -webkit-animation: fill 3s forwards infinite; animation: fill 3s forward infinite;}"; 145 | document.body.appendChild(sheet); 146 | } 147 | 148 | 149 | } 150 | 151 | ReactDOM.render(, document.getElementById('container')); 152 | 153 | 154 | 155 | 156 | 157 | -------------------------------------------------------------------------------- /example/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import ClickNHold from '../src/ClickNHold.jsx'; 4 | 5 | 6 | export default class App extends React.Component { 7 | constructor(props) { 8 | super(props); 9 | this.state = { 10 | events:[], 11 | time:2, 12 | page: 1 13 | } 14 | } 15 | 16 | render() { 17 | return (
18 | {this.setState({page:2})}}>2 19 | this.setState({page:1})}>1 20 | 21 |
22 |
23 |
24 |

react-click-n-hold




25 | Long press event for react. Click and hold wrapper component. 26 |

27 | this.setState({events: [...this.state.events, {color:'rgba(194, 207, 178, 1)', event:'START'}]})} 30 | onClickNHold={(t, target)=>{this.setState({events: [...this.state.events, {color: 'rgba(250, 175, 190, 1)', event:('CLICK AND HOLD')}]})}} 31 | onEnd={(e, enough)=>this.setState({events: [...this.state.events, {color:'rgba(126, 137, 135, 1)', event:('END ' + (enough ?'enough time':'too soon'))}]})}> 32 | 33 | 34 |
35 |

36 | Time 37 | { 38 | let time = this.state.time; 39 | if(e.target.value && !isNaN(e.target.value) && e.target.value > 0){ 40 | time = e.target.value 41 | } 42 | this.setState({time: time}); 43 | var sheet = document.getElementsByTagName("style")[0]; 44 | sheet.innerHTML = ".cnh_holding button { -webkit-animation: fill " + e.target.value + "s forwards infinite; animation: fill " + e.target.value + "s forward infinite;}"; 45 | }}/> 46 | s 47 |


48 | See this project on Github 49 | this.setState({page:2})}>Example usage 50 | 51 | 52 |
53 | 54 |
55 |
56 |
57 |
    58 | {this.state.events.map((ev, index)=>{ 59 | 60 | return(
  • {ev.event}
    • ); 61 | })} 62 |
63 |
64 | 65 |
66 |
67 |
68 |

Usage Example

69 |

70 | 71 | import React from 'react';
72 | import ClickNHold from 'react-click-n-hold';
73 | 74 | export default class Example extends React.Component {
75 |   start(e){
76 | 77 |    console.log('START');
78 | 79 |  }
80 |   end(e, enough){
81 | 82 |    console.log('END');
83 |    console.log(enough ? 'Click released after enough time': 'Click released too soon');
84 | 85 |  }
86 |   clickNHold(e){
87 | 88 |    console.log('CLICK AND HOLD');
89 | 90 |  }
91 |   render(){
92 |    return (
93 |     <ClickNHold
94 |      time={2}
95 |      onStart={this.start}
96 |      onClickNHold={this.clickNHold}
97 |      onEnd={this.end} >
98 |      <button>Click and hold</button>
99 |     </ClickNHold>
 100 |    );
101 |   }
102 | }
103 |

104 |
105 |
106 |

Animation Example

107 |


108 | @-webkit-keyframes fill {
109 |   to {
110 |    background-size: 100% 0;
111 |   }
112 | }
113 |
114 | @keyframes fill {
115 |   to {
116 |    background-size: 100% 0;
117 |   }
118 | }
 119 |
120 | //The wrapper has the .cnh_holding class while the button is being pressed
 121 | .cnh_holding button {
 122 |   background: -webkit-linear-gradient( white , white) rgb(255,215,235) no-repeat 0 0;
123 |   background: linear-gradient( white , white) rgb(255,215,235) no-repeat 0 0;
124 |   mix-blend-mode: multiply;
125 |   background-size: 100% 100%;
126 |   -webkit-animation: fill 2s forwards;
127 |   animation: fill 2s forwards;
128 | }
 129 |
130 |

131 |
132 |
133 | 134 |
); 135 | } 136 | 137 | componentDidUpdate(){ 138 | let list = document.getElementById('eventList'); 139 | list.scrollTop = list.scrollHeight; 140 | } 141 | 142 | componentDidMount(){ 143 | var sheet = document.createElement('style'); 144 | sheet.innerHTML = ".cnh_holding button { -webkit-animation: fill 3s forwards infinite; animation: fill 3s forward infinite;}"; 145 | document.body.appendChild(sheet); 146 | } 147 | 148 | 149 | } 150 | 151 | ReactDOM.render(, document.getElementById('container')); 152 | 153 | 154 | 155 | 156 | 157 | -------------------------------------------------------------------------------- /docs/bs12.css: -------------------------------------------------------------------------------- 1 | @-ms-viewport { 2 | width: device-width; 3 | } 4 | .visible-xs, 5 | .visible-sm, 6 | .visible-md, 7 | .visible-lg { 8 | display: none !important; 9 | } 10 | .visible-xs-block, 11 | .visible-xs-inline, 12 | .visible-xs-inline-block, 13 | .visible-sm-block, 14 | .visible-sm-inline, 15 | .visible-sm-inline-block, 16 | .visible-md-block, 17 | .visible-md-inline, 18 | .visible-md-inline-block, 19 | .visible-lg-block, 20 | .visible-lg-inline, 21 | .visible-lg-inline-block { 22 | display: none !important; 23 | } 24 | @media (max-width: 767px) { 25 | .visible-xs { 26 | display: block !important; 27 | } 28 | table.visible-xs { 29 | display: table; 30 | } 31 | tr.visible-xs { 32 | display: table-row !important; 33 | } 34 | th.visible-xs, 35 | td.visible-xs { 36 | display: table-cell !important; 37 | } 38 | } 39 | @media (max-width: 767px) { 40 | .visible-xs-block { 41 | display: block !important; 42 | } 43 | } 44 | @media (max-width: 767px) { 45 | .visible-xs-inline { 46 | display: inline !important; 47 | } 48 | } 49 | @media (max-width: 767px) { 50 | .visible-xs-inline-block { 51 | display: inline-block !important; 52 | } 53 | } 54 | @media (min-width: 768px) and (max-width: 991px) { 55 | .visible-sm { 56 | display: block !important; 57 | } 58 | table.visible-sm { 59 | display: table; 60 | } 61 | tr.visible-sm { 62 | display: table-row !important; 63 | } 64 | th.visible-sm, 65 | td.visible-sm { 66 | display: table-cell !important; 67 | } 68 | } 69 | @media (min-width: 768px) and (max-width: 991px) { 70 | .visible-sm-block { 71 | display: block !important; 72 | } 73 | } 74 | @media (min-width: 768px) and (max-width: 991px) { 75 | .visible-sm-inline { 76 | display: inline !important; 77 | } 78 | } 79 | @media (min-width: 768px) and (max-width: 991px) { 80 | .visible-sm-inline-block { 81 | display: inline-block !important; 82 | } 83 | } 84 | @media (min-width: 992px) and (max-width: 1199px) { 85 | .visible-md { 86 | display: block !important; 87 | } 88 | table.visible-md { 89 | display: table; 90 | } 91 | tr.visible-md { 92 | display: table-row !important; 93 | } 94 | th.visible-md, 95 | td.visible-md { 96 | display: table-cell !important; 97 | } 98 | } 99 | @media (min-width: 992px) and (max-width: 1199px) { 100 | .visible-md-block { 101 | display: block !important; 102 | } 103 | } 104 | @media (min-width: 992px) and (max-width: 1199px) { 105 | .visible-md-inline { 106 | display: inline !important; 107 | } 108 | } 109 | @media (min-width: 992px) and (max-width: 1199px) { 110 | .visible-md-inline-block { 111 | display: inline-block !important; 112 | } 113 | } 114 | @media (min-width: 1200px) { 115 | .visible-lg { 116 | display: block !important; 117 | } 118 | table.visible-lg { 119 | display: table; 120 | } 121 | tr.visible-lg { 122 | display: table-row !important; 123 | } 124 | th.visible-lg, 125 | td.visible-lg { 126 | display: table-cell !important; 127 | } 128 | } 129 | @media (min-width: 1200px) { 130 | .visible-lg-block { 131 | display: block !important; 132 | } 133 | } 134 | @media (min-width: 1200px) { 135 | .visible-lg-inline { 136 | display: inline !important; 137 | } 138 | } 139 | @media (min-width: 1200px) { 140 | .visible-lg-inline-block { 141 | display: inline-block !important; 142 | } 143 | } 144 | @media (max-width: 767px) { 145 | .hidden-xs { 146 | display: none !important; 147 | } 148 | } 149 | @media (min-width: 768px) and (max-width: 991px) { 150 | .hidden-sm { 151 | display: none !important; 152 | } 153 | } 154 | @media (min-width: 992px) and (max-width: 1199px) { 155 | .hidden-md { 156 | display: none !important; 157 | } 158 | } 159 | @media (min-width: 1200px) { 160 | .hidden-lg { 161 | display: none !important; 162 | } 163 | } 164 | .visible-print { 165 | display: none !important; 166 | } 167 | @media print { 168 | .visible-print { 169 | display: block !important; 170 | } 171 | table.visible-print { 172 | display: table; 173 | } 174 | tr.visible-print { 175 | display: table-row !important; 176 | } 177 | th.visible-print, 178 | td.visible-print { 179 | display: table-cell !important; 180 | } 181 | } 182 | .visible-print-block { 183 | display: none !important; 184 | } 185 | @media print { 186 | .visible-print-block { 187 | display: block !important; 188 | } 189 | } 190 | .visible-print-inline { 191 | display: none !important; 192 | } 193 | @media print { 194 | .visible-print-inline { 195 | display: inline !important; 196 | } 197 | } 198 | .visible-print-inline-block { 199 | display: none !important; 200 | } 201 | @media print { 202 | .visible-print-inline-block { 203 | display: inline-block !important; 204 | } 205 | } 206 | @media print { 207 | .hidden-print { 208 | display: none !important; 209 | } 210 | } 211 | .container { 212 | margin-right: auto; 213 | margin-left: auto; 214 | padding-left: 15px; 215 | padding-right: 15px; 216 | } 217 | @media (min-width: 768px) { 218 | .container { 219 | width: 750px; 220 | } 221 | } 222 | @media (min-width: 992px) { 223 | .container { 224 | width: 970px; 225 | } 226 | } 227 | @media (min-width: 1200px) { 228 | .container { 229 | width: 1170px; 230 | } 231 | } 232 | .container-fluid { 233 | margin-right: auto; 234 | margin-left: auto; 235 | padding-left: 15px; 236 | padding-right: 15px; 237 | } 238 | .row { 239 | margin-left: -15px; 240 | margin-right: -15px; 241 | } 242 | .col, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { 243 | position: relative; 244 | min-height: 1px; 245 | padding-left: 15px; 246 | padding-right: 15px; 247 | } 248 | .col, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { 249 | float: left; 250 | } 251 | .col-xs-12 { 252 | width: 100%; 253 | } 254 | .col-xs-11 { 255 | width: 91.66666667%; 256 | } 257 | .col-xs-10 { 258 | width: 83.33333333%; 259 | } 260 | .col-xs-9 { 261 | width: 75%; 262 | } 263 | .col-xs-8 { 264 | width: 66.66666667%; 265 | } 266 | .col-xs-7 { 267 | width: 58.33333333%; 268 | } 269 | .col-xs-6 { 270 | width: 50%; 271 | } 272 | .col-xs-5 { 273 | width: 41.66666667%; 274 | } 275 | .col-xs-4 { 276 | width: 33.33333333%; 277 | } 278 | .col-xs-3 { 279 | width: 25%; 280 | } 281 | .col-xs-2 { 282 | width: 16.66666667%; 283 | } 284 | .col-xs-1 { 285 | width: 8.33333333%; 286 | } 287 | .col-xs-pull-12 { 288 | right: 100%; 289 | } 290 | .col-xs-pull-11 { 291 | right: 91.66666667%; 292 | } 293 | .col-xs-pull-10 { 294 | right: 83.33333333%; 295 | } 296 | .col-xs-pull-9 { 297 | right: 75%; 298 | } 299 | .col-xs-pull-8 { 300 | right: 66.66666667%; 301 | } 302 | .col-xs-pull-7 { 303 | right: 58.33333333%; 304 | } 305 | .col-xs-pull-6 { 306 | right: 50%; 307 | } 308 | .col-xs-pull-5 { 309 | right: 41.66666667%; 310 | } 311 | .col-xs-pull-4 { 312 | right: 33.33333333%; 313 | } 314 | .col-xs-pull-3 { 315 | right: 25%; 316 | } 317 | .col-xs-pull-2 { 318 | right: 16.66666667%; 319 | } 320 | .col-xs-pull-1 { 321 | right: 8.33333333%; 322 | } 323 | .col-xs-pull-0 { 324 | right: auto; 325 | } 326 | .col-xs-push-12 { 327 | left: 100%; 328 | } 329 | .col-xs-push-11 { 330 | left: 91.66666667%; 331 | } 332 | .col-xs-push-10 { 333 | left: 83.33333333%; 334 | } 335 | .col-xs-push-9 { 336 | left: 75%; 337 | } 338 | .col-xs-push-8 { 339 | left: 66.66666667%; 340 | } 341 | .col-xs-push-7 { 342 | left: 58.33333333%; 343 | } 344 | .col-xs-push-6 { 345 | left: 50%; 346 | } 347 | .col-xs-push-5 { 348 | left: 41.66666667%; 349 | } 350 | .col-xs-push-4 { 351 | left: 33.33333333%; 352 | } 353 | .col-xs-push-3 { 354 | left: 25%; 355 | } 356 | .col-xs-push-2 { 357 | left: 16.66666667%; 358 | } 359 | .col-xs-push-1 { 360 | left: 8.33333333%; 361 | } 362 | .col-xs-push-0 { 363 | left: auto; 364 | } 365 | .col-xs-offset-12 { 366 | margin-left: 100%; 367 | } 368 | .col-xs-offset-11 { 369 | margin-left: 91.66666667%; 370 | } 371 | .col-xs-offset-10 { 372 | margin-left: 83.33333333%; 373 | } 374 | .col-xs-offset-9 { 375 | margin-left: 75%; 376 | } 377 | .col-xs-offset-8 { 378 | margin-left: 66.66666667%; 379 | } 380 | .col-xs-offset-7 { 381 | margin-left: 58.33333333%; 382 | } 383 | .col-xs-offset-6 { 384 | margin-left: 50%; 385 | } 386 | .col-xs-offset-5 { 387 | margin-left: 41.66666667%; 388 | } 389 | .col-xs-offset-4 { 390 | margin-left: 33.33333333%; 391 | } 392 | .col-xs-offset-3 { 393 | margin-left: 25%; 394 | } 395 | .col-xs-offset-2 { 396 | margin-left: 16.66666667%; 397 | } 398 | .col-xs-offset-1 { 399 | margin-left: 8.33333333%; 400 | } 401 | .col-xs-offset-0 { 402 | margin-left: 0%; 403 | } 404 | @media (min-width: 768px) { 405 | .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { 406 | float: left; 407 | } 408 | .col-sm-12 { 409 | width: 100%; 410 | } 411 | .col-sm-11 { 412 | width: 91.66666667%; 413 | } 414 | .col-sm-10 { 415 | width: 83.33333333%; 416 | } 417 | .col-sm-9 { 418 | width: 75%; 419 | } 420 | .col-sm-8 { 421 | width: 66.66666667%; 422 | } 423 | .col-sm-7 { 424 | width: 58.33333333%; 425 | } 426 | .col-sm-6 { 427 | width: 50%; 428 | } 429 | .col-sm-5 { 430 | width: 41.66666667%; 431 | } 432 | .col-sm-4 { 433 | width: 33.33333333%; 434 | } 435 | .col-sm-3 { 436 | width: 25%; 437 | } 438 | .col-sm-2 { 439 | width: 16.66666667%; 440 | } 441 | .col-sm-1 { 442 | width: 8.33333333%; 443 | } 444 | .col-sm-pull-12 { 445 | right: 100%; 446 | } 447 | .col-sm-pull-11 { 448 | right: 91.66666667%; 449 | } 450 | .col-sm-pull-10 { 451 | right: 83.33333333%; 452 | } 453 | .col-sm-pull-9 { 454 | right: 75%; 455 | } 456 | .col-sm-pull-8 { 457 | right: 66.66666667%; 458 | } 459 | .col-sm-pull-7 { 460 | right: 58.33333333%; 461 | } 462 | .col-sm-pull-6 { 463 | right: 50%; 464 | } 465 | .col-sm-pull-5 { 466 | right: 41.66666667%; 467 | } 468 | .col-sm-pull-4 { 469 | right: 33.33333333%; 470 | } 471 | .col-sm-pull-3 { 472 | right: 25%; 473 | } 474 | .col-sm-pull-2 { 475 | right: 16.66666667%; 476 | } 477 | .col-sm-pull-1 { 478 | right: 8.33333333%; 479 | } 480 | .col-sm-pull-0 { 481 | right: auto; 482 | } 483 | .col-sm-push-12 { 484 | left: 100%; 485 | } 486 | .col-sm-push-11 { 487 | left: 91.66666667%; 488 | } 489 | .col-sm-push-10 { 490 | left: 83.33333333%; 491 | } 492 | .col-sm-push-9 { 493 | left: 75%; 494 | } 495 | .col-sm-push-8 { 496 | left: 66.66666667%; 497 | } 498 | .col-sm-push-7 { 499 | left: 58.33333333%; 500 | } 501 | .col-sm-push-6 { 502 | left: 50%; 503 | } 504 | .col-sm-push-5 { 505 | left: 41.66666667%; 506 | } 507 | .col-sm-push-4 { 508 | left: 33.33333333%; 509 | } 510 | .col-sm-push-3 { 511 | left: 25%; 512 | } 513 | .col-sm-push-2 { 514 | left: 16.66666667%; 515 | } 516 | .col-sm-push-1 { 517 | left: 8.33333333%; 518 | } 519 | .col-sm-push-0 { 520 | left: auto; 521 | } 522 | .col-sm-offset-12 { 523 | margin-left: 100%; 524 | } 525 | .col-sm-offset-11 { 526 | margin-left: 91.66666667%; 527 | } 528 | .col-sm-offset-10 { 529 | margin-left: 83.33333333%; 530 | } 531 | .col-sm-offset-9 { 532 | margin-left: 75%; 533 | } 534 | .col-sm-offset-8 { 535 | margin-left: 66.66666667%; 536 | } 537 | .col-sm-offset-7 { 538 | margin-left: 58.33333333%; 539 | } 540 | .col-sm-offset-6 { 541 | margin-left: 50%; 542 | } 543 | .col-sm-offset-5 { 544 | margin-left: 41.66666667%; 545 | } 546 | .col-sm-offset-4 { 547 | margin-left: 33.33333333%; 548 | } 549 | .col-sm-offset-3 { 550 | margin-left: 25%; 551 | } 552 | .col-sm-offset-2 { 553 | margin-left: 16.66666667%; 554 | } 555 | .col-sm-offset-1 { 556 | margin-left: 8.33333333%; 557 | } 558 | .col-sm-offset-0 { 559 | margin-left: 0%; 560 | } 561 | } 562 | @media (min-width: 992px) { 563 | .col, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { 564 | float: left; 565 | } 566 | .col-md-12 { 567 | width: 100%; 568 | } 569 | .col-md-11 { 570 | width: 91.66666667%; 571 | } 572 | .col-md-10 { 573 | width: 83.33333333%; 574 | } 575 | .col-md-9 { 576 | width: 75%; 577 | } 578 | .col-md-8 { 579 | width: 66.66666667%; 580 | } 581 | .col-md-7 { 582 | width: 58.33333333%; 583 | } 584 | .col-md-6 { 585 | width: 50%; 586 | } 587 | .col-md-5 { 588 | width: 41.66666667%; 589 | } 590 | .col-md-4 { 591 | width: 33.33333333%; 592 | } 593 | .col-md-3 { 594 | width: 25%; 595 | } 596 | .col-md-2 { 597 | width: 16.66666667%; 598 | } 599 | .col-md-1 { 600 | width: 8.33333333%; 601 | } 602 | .col-md-pull-12 { 603 | right: 100%; 604 | } 605 | .col-md-pull-11 { 606 | right: 91.66666667%; 607 | } 608 | .col-md-pull-10 { 609 | right: 83.33333333%; 610 | } 611 | .col-md-pull-9 { 612 | right: 75%; 613 | } 614 | .col-md-pull-8 { 615 | right: 66.66666667%; 616 | } 617 | .col-md-pull-7 { 618 | right: 58.33333333%; 619 | } 620 | .col-md-pull-6 { 621 | right: 50%; 622 | } 623 | .col-md-pull-5 { 624 | right: 41.66666667%; 625 | } 626 | .col-md-pull-4 { 627 | right: 33.33333333%; 628 | } 629 | .col-md-pull-3 { 630 | right: 25%; 631 | } 632 | .col-md-pull-2 { 633 | right: 16.66666667%; 634 | } 635 | .col-md-pull-1 { 636 | right: 8.33333333%; 637 | } 638 | .col-md-pull-0 { 639 | right: auto; 640 | } 641 | .col-md-push-12 { 642 | left: 100%; 643 | } 644 | .col-md-push-11 { 645 | left: 91.66666667%; 646 | } 647 | .col-md-push-10 { 648 | left: 83.33333333%; 649 | } 650 | .col-md-push-9 { 651 | left: 75%; 652 | } 653 | .col-md-push-8 { 654 | left: 66.66666667%; 655 | } 656 | .col-md-push-7 { 657 | left: 58.33333333%; 658 | } 659 | .col-md-push-6 { 660 | left: 50%; 661 | } 662 | .col-md-push-5 { 663 | left: 41.66666667%; 664 | } 665 | .col-md-push-4 { 666 | left: 33.33333333%; 667 | } 668 | .col-md-push-3 { 669 | left: 25%; 670 | } 671 | .col-md-push-2 { 672 | left: 16.66666667%; 673 | } 674 | .col-md-push-1 { 675 | left: 8.33333333%; 676 | } 677 | .col-md-push-0 { 678 | left: auto; 679 | } 680 | .col-md-offset-12 { 681 | margin-left: 100%; 682 | } 683 | .col-md-offset-11 { 684 | margin-left: 91.66666667%; 685 | } 686 | .col-md-offset-10 { 687 | margin-left: 83.33333333%; 688 | } 689 | .col-md-offset-9 { 690 | margin-left: 75%; 691 | } 692 | .col-md-offset-8 { 693 | margin-left: 66.66666667%; 694 | } 695 | .col-md-offset-7 { 696 | margin-left: 58.33333333%; 697 | } 698 | .col-md-offset-6 { 699 | margin-left: 50%; 700 | } 701 | .col-md-offset-5 { 702 | margin-left: 41.66666667%; 703 | } 704 | .col-md-offset-4 { 705 | margin-left: 33.33333333%; 706 | } 707 | .col-md-offset-3 { 708 | margin-left: 25%; 709 | } 710 | .col-md-offset-2 { 711 | margin-left: 16.66666667%; 712 | } 713 | .col-md-offset-1 { 714 | margin-left: 8.33333333%; 715 | } 716 | .col-md-offset-0 { 717 | margin-left: 0%; 718 | } 719 | } 720 | @media (min-width: 1200px) { 721 | .col, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { 722 | float: left; 723 | } 724 | .col-lg-12 { 725 | width: 100%; 726 | } 727 | .col-lg-11 { 728 | width: 91.66666667%; 729 | } 730 | .col-lg-10 { 731 | width: 83.33333333%; 732 | } 733 | .col-lg-9 { 734 | width: 75%; 735 | } 736 | .col-lg-8 { 737 | width: 66.66666667%; 738 | } 739 | .col-lg-7 { 740 | width: 58.33333333%; 741 | } 742 | .col-lg-6 { 743 | width: 50%; 744 | } 745 | .col-lg-5 { 746 | width: 41.66666667%; 747 | } 748 | .col-lg-4 { 749 | width: 33.33333333%; 750 | } 751 | .col-lg-3 { 752 | width: 25%; 753 | } 754 | .col-lg-2 { 755 | width: 16.66666667%; 756 | } 757 | .col-lg-1 { 758 | width: 8.33333333%; 759 | } 760 | .col-lg-pull-12 { 761 | right: 100%; 762 | } 763 | .col-lg-pull-11 { 764 | right: 91.66666667%; 765 | } 766 | .col-lg-pull-10 { 767 | right: 83.33333333%; 768 | } 769 | .col-lg-pull-9 { 770 | right: 75%; 771 | } 772 | .col-lg-pull-8 { 773 | right: 66.66666667%; 774 | } 775 | .col-lg-pull-7 { 776 | right: 58.33333333%; 777 | } 778 | .col-lg-pull-6 { 779 | right: 50%; 780 | } 781 | .col-lg-pull-5 { 782 | right: 41.66666667%; 783 | } 784 | .col-lg-pull-4 { 785 | right: 33.33333333%; 786 | } 787 | .col-lg-pull-3 { 788 | right: 25%; 789 | } 790 | .col-lg-pull-2 { 791 | right: 16.66666667%; 792 | } 793 | .col-lg-pull-1 { 794 | right: 8.33333333%; 795 | } 796 | .col-lg-pull-0 { 797 | right: auto; 798 | } 799 | .col-lg-push-12 { 800 | left: 100%; 801 | } 802 | .col-lg-push-11 { 803 | left: 91.66666667%; 804 | } 805 | .col-lg-push-10 { 806 | left: 83.33333333%; 807 | } 808 | .col-lg-push-9 { 809 | left: 75%; 810 | } 811 | .col-lg-push-8 { 812 | left: 66.66666667%; 813 | } 814 | .col-lg-push-7 { 815 | left: 58.33333333%; 816 | } 817 | .col-lg-push-6 { 818 | left: 50%; 819 | } 820 | .col-lg-push-5 { 821 | left: 41.66666667%; 822 | } 823 | .col-lg-push-4 { 824 | left: 33.33333333%; 825 | } 826 | .col-lg-push-3 { 827 | left: 25%; 828 | } 829 | .col-lg-push-2 { 830 | left: 16.66666667%; 831 | } 832 | .col-lg-push-1 { 833 | left: 8.33333333%; 834 | } 835 | .col-lg-push-0 { 836 | left: auto; 837 | } 838 | .col-lg-offset-12 { 839 | margin-left: 100%; 840 | } 841 | .col-lg-offset-11 { 842 | margin-left: 91.66666667%; 843 | } 844 | .col-lg-offset-10 { 845 | margin-left: 83.33333333%; 846 | } 847 | .col-lg-offset-9 { 848 | margin-left: 75%; 849 | } 850 | .col-lg-offset-8 { 851 | margin-left: 66.66666667%; 852 | } 853 | .col-lg-offset-7 { 854 | margin-left: 58.33333333%; 855 | } 856 | .col-lg-offset-6 { 857 | margin-left: 50%; 858 | } 859 | .col-lg-offset-5 { 860 | margin-left: 41.66666667%; 861 | } 862 | .col-lg-offset-4 { 863 | margin-left: 33.33333333%; 864 | } 865 | .col-lg-offset-3 { 866 | margin-left: 25%; 867 | } 868 | .col-lg-offset-2 { 869 | margin-left: 16.66666667%; 870 | } 871 | .col-lg-offset-1 { 872 | margin-left: 8.33333333%; 873 | } 874 | .col-lg-offset-0 { 875 | margin-left: 0%; 876 | } 877 | } 878 | .clearfix, 879 | .clearfix:before, 880 | .clearfix:after, 881 | .container:before, 882 | .container:after, 883 | .container-fluid:before, 884 | .container-fluid:after, 885 | .row:before, 886 | .row:after { 887 | content: " "; 888 | display: table; 889 | } 890 | .clearfix:after, 891 | .container:after, 892 | .container-fluid:after, 893 | .row:after { 894 | clear: both; 895 | } 896 | .center-block { 897 | display: block; 898 | margin-left: auto; 899 | margin-right: auto; 900 | } 901 | .pull-right { 902 | float: right !important; 903 | } 904 | .pull-left { 905 | float: left !important; 906 | } 907 | *, 908 | *:before, 909 | *:after { 910 | -webkit-box-sizing: border-box; 911 | -moz-box-sizing: border-box; 912 | box-sizing: border-box; 913 | } -------------------------------------------------------------------------------- /example/bs12.css: -------------------------------------------------------------------------------- 1 | @-ms-viewport { 2 | width: device-width; 3 | } 4 | .visible-xs, 5 | .visible-sm, 6 | .visible-md, 7 | .visible-lg { 8 | display: none !important; 9 | } 10 | .visible-xs-block, 11 | .visible-xs-inline, 12 | .visible-xs-inline-block, 13 | .visible-sm-block, 14 | .visible-sm-inline, 15 | .visible-sm-inline-block, 16 | .visible-md-block, 17 | .visible-md-inline, 18 | .visible-md-inline-block, 19 | .visible-lg-block, 20 | .visible-lg-inline, 21 | .visible-lg-inline-block { 22 | display: none !important; 23 | } 24 | @media (max-width: 767px) { 25 | .visible-xs { 26 | display: block !important; 27 | } 28 | table.visible-xs { 29 | display: table; 30 | } 31 | tr.visible-xs { 32 | display: table-row !important; 33 | } 34 | th.visible-xs, 35 | td.visible-xs { 36 | display: table-cell !important; 37 | } 38 | } 39 | @media (max-width: 767px) { 40 | .visible-xs-block { 41 | display: block !important; 42 | } 43 | } 44 | @media (max-width: 767px) { 45 | .visible-xs-inline { 46 | display: inline !important; 47 | } 48 | } 49 | @media (max-width: 767px) { 50 | .visible-xs-inline-block { 51 | display: inline-block !important; 52 | } 53 | } 54 | @media (min-width: 768px) and (max-width: 991px) { 55 | .visible-sm { 56 | display: block !important; 57 | } 58 | table.visible-sm { 59 | display: table; 60 | } 61 | tr.visible-sm { 62 | display: table-row !important; 63 | } 64 | th.visible-sm, 65 | td.visible-sm { 66 | display: table-cell !important; 67 | } 68 | } 69 | @media (min-width: 768px) and (max-width: 991px) { 70 | .visible-sm-block { 71 | display: block !important; 72 | } 73 | } 74 | @media (min-width: 768px) and (max-width: 991px) { 75 | .visible-sm-inline { 76 | display: inline !important; 77 | } 78 | } 79 | @media (min-width: 768px) and (max-width: 991px) { 80 | .visible-sm-inline-block { 81 | display: inline-block !important; 82 | } 83 | } 84 | @media (min-width: 992px) and (max-width: 1199px) { 85 | .visible-md { 86 | display: block !important; 87 | } 88 | table.visible-md { 89 | display: table; 90 | } 91 | tr.visible-md { 92 | display: table-row !important; 93 | } 94 | th.visible-md, 95 | td.visible-md { 96 | display: table-cell !important; 97 | } 98 | } 99 | @media (min-width: 992px) and (max-width: 1199px) { 100 | .visible-md-block { 101 | display: block !important; 102 | } 103 | } 104 | @media (min-width: 992px) and (max-width: 1199px) { 105 | .visible-md-inline { 106 | display: inline !important; 107 | } 108 | } 109 | @media (min-width: 992px) and (max-width: 1199px) { 110 | .visible-md-inline-block { 111 | display: inline-block !important; 112 | } 113 | } 114 | @media (min-width: 1200px) { 115 | .visible-lg { 116 | display: block !important; 117 | } 118 | table.visible-lg { 119 | display: table; 120 | } 121 | tr.visible-lg { 122 | display: table-row !important; 123 | } 124 | th.visible-lg, 125 | td.visible-lg { 126 | display: table-cell !important; 127 | } 128 | } 129 | @media (min-width: 1200px) { 130 | .visible-lg-block { 131 | display: block !important; 132 | } 133 | } 134 | @media (min-width: 1200px) { 135 | .visible-lg-inline { 136 | display: inline !important; 137 | } 138 | } 139 | @media (min-width: 1200px) { 140 | .visible-lg-inline-block { 141 | display: inline-block !important; 142 | } 143 | } 144 | @media (max-width: 767px) { 145 | .hidden-xs { 146 | display: none !important; 147 | } 148 | } 149 | @media (min-width: 768px) and (max-width: 991px) { 150 | .hidden-sm { 151 | display: none !important; 152 | } 153 | } 154 | @media (min-width: 992px) and (max-width: 1199px) { 155 | .hidden-md { 156 | display: none !important; 157 | } 158 | } 159 | @media (min-width: 1200px) { 160 | .hidden-lg { 161 | display: none !important; 162 | } 163 | } 164 | .visible-print { 165 | display: none !important; 166 | } 167 | @media print { 168 | .visible-print { 169 | display: block !important; 170 | } 171 | table.visible-print { 172 | display: table; 173 | } 174 | tr.visible-print { 175 | display: table-row !important; 176 | } 177 | th.visible-print, 178 | td.visible-print { 179 | display: table-cell !important; 180 | } 181 | } 182 | .visible-print-block { 183 | display: none !important; 184 | } 185 | @media print { 186 | .visible-print-block { 187 | display: block !important; 188 | } 189 | } 190 | .visible-print-inline { 191 | display: none !important; 192 | } 193 | @media print { 194 | .visible-print-inline { 195 | display: inline !important; 196 | } 197 | } 198 | .visible-print-inline-block { 199 | display: none !important; 200 | } 201 | @media print { 202 | .visible-print-inline-block { 203 | display: inline-block !important; 204 | } 205 | } 206 | @media print { 207 | .hidden-print { 208 | display: none !important; 209 | } 210 | } 211 | .container { 212 | margin-right: auto; 213 | margin-left: auto; 214 | padding-left: 15px; 215 | padding-right: 15px; 216 | } 217 | @media (min-width: 768px) { 218 | .container { 219 | width: 750px; 220 | } 221 | } 222 | @media (min-width: 992px) { 223 | .container { 224 | width: 970px; 225 | } 226 | } 227 | @media (min-width: 1200px) { 228 | .container { 229 | width: 1170px; 230 | } 231 | } 232 | .container-fluid { 233 | margin-right: auto; 234 | margin-left: auto; 235 | padding-left: 15px; 236 | padding-right: 15px; 237 | } 238 | .row { 239 | margin-left: -15px; 240 | margin-right: -15px; 241 | } 242 | .col, .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { 243 | position: relative; 244 | min-height: 1px; 245 | padding-left: 15px; 246 | padding-right: 15px; 247 | } 248 | .col, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { 249 | float: left; 250 | } 251 | .col-xs-12 { 252 | width: 100%; 253 | } 254 | .col-xs-11 { 255 | width: 91.66666667%; 256 | } 257 | .col-xs-10 { 258 | width: 83.33333333%; 259 | } 260 | .col-xs-9 { 261 | width: 75%; 262 | } 263 | .col-xs-8 { 264 | width: 66.66666667%; 265 | } 266 | .col-xs-7 { 267 | width: 58.33333333%; 268 | } 269 | .col-xs-6 { 270 | width: 50%; 271 | } 272 | .col-xs-5 { 273 | width: 41.66666667%; 274 | } 275 | .col-xs-4 { 276 | width: 33.33333333%; 277 | } 278 | .col-xs-3 { 279 | width: 25%; 280 | } 281 | .col-xs-2 { 282 | width: 16.66666667%; 283 | } 284 | .col-xs-1 { 285 | width: 8.33333333%; 286 | } 287 | .col-xs-pull-12 { 288 | right: 100%; 289 | } 290 | .col-xs-pull-11 { 291 | right: 91.66666667%; 292 | } 293 | .col-xs-pull-10 { 294 | right: 83.33333333%; 295 | } 296 | .col-xs-pull-9 { 297 | right: 75%; 298 | } 299 | .col-xs-pull-8 { 300 | right: 66.66666667%; 301 | } 302 | .col-xs-pull-7 { 303 | right: 58.33333333%; 304 | } 305 | .col-xs-pull-6 { 306 | right: 50%; 307 | } 308 | .col-xs-pull-5 { 309 | right: 41.66666667%; 310 | } 311 | .col-xs-pull-4 { 312 | right: 33.33333333%; 313 | } 314 | .col-xs-pull-3 { 315 | right: 25%; 316 | } 317 | .col-xs-pull-2 { 318 | right: 16.66666667%; 319 | } 320 | .col-xs-pull-1 { 321 | right: 8.33333333%; 322 | } 323 | .col-xs-pull-0 { 324 | right: auto; 325 | } 326 | .col-xs-push-12 { 327 | left: 100%; 328 | } 329 | .col-xs-push-11 { 330 | left: 91.66666667%; 331 | } 332 | .col-xs-push-10 { 333 | left: 83.33333333%; 334 | } 335 | .col-xs-push-9 { 336 | left: 75%; 337 | } 338 | .col-xs-push-8 { 339 | left: 66.66666667%; 340 | } 341 | .col-xs-push-7 { 342 | left: 58.33333333%; 343 | } 344 | .col-xs-push-6 { 345 | left: 50%; 346 | } 347 | .col-xs-push-5 { 348 | left: 41.66666667%; 349 | } 350 | .col-xs-push-4 { 351 | left: 33.33333333%; 352 | } 353 | .col-xs-push-3 { 354 | left: 25%; 355 | } 356 | .col-xs-push-2 { 357 | left: 16.66666667%; 358 | } 359 | .col-xs-push-1 { 360 | left: 8.33333333%; 361 | } 362 | .col-xs-push-0 { 363 | left: auto; 364 | } 365 | .col-xs-offset-12 { 366 | margin-left: 100%; 367 | } 368 | .col-xs-offset-11 { 369 | margin-left: 91.66666667%; 370 | } 371 | .col-xs-offset-10 { 372 | margin-left: 83.33333333%; 373 | } 374 | .col-xs-offset-9 { 375 | margin-left: 75%; 376 | } 377 | .col-xs-offset-8 { 378 | margin-left: 66.66666667%; 379 | } 380 | .col-xs-offset-7 { 381 | margin-left: 58.33333333%; 382 | } 383 | .col-xs-offset-6 { 384 | margin-left: 50%; 385 | } 386 | .col-xs-offset-5 { 387 | margin-left: 41.66666667%; 388 | } 389 | .col-xs-offset-4 { 390 | margin-left: 33.33333333%; 391 | } 392 | .col-xs-offset-3 { 393 | margin-left: 25%; 394 | } 395 | .col-xs-offset-2 { 396 | margin-left: 16.66666667%; 397 | } 398 | .col-xs-offset-1 { 399 | margin-left: 8.33333333%; 400 | } 401 | .col-xs-offset-0 { 402 | margin-left: 0%; 403 | } 404 | @media (min-width: 768px) { 405 | .col, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { 406 | float: left; 407 | } 408 | .col-sm-12 { 409 | width: 100%; 410 | } 411 | .col-sm-11 { 412 | width: 91.66666667%; 413 | } 414 | .col-sm-10 { 415 | width: 83.33333333%; 416 | } 417 | .col-sm-9 { 418 | width: 75%; 419 | } 420 | .col-sm-8 { 421 | width: 66.66666667%; 422 | } 423 | .col-sm-7 { 424 | width: 58.33333333%; 425 | } 426 | .col-sm-6 { 427 | width: 50%; 428 | } 429 | .col-sm-5 { 430 | width: 41.66666667%; 431 | } 432 | .col-sm-4 { 433 | width: 33.33333333%; 434 | } 435 | .col-sm-3 { 436 | width: 25%; 437 | } 438 | .col-sm-2 { 439 | width: 16.66666667%; 440 | } 441 | .col-sm-1 { 442 | width: 8.33333333%; 443 | } 444 | .col-sm-pull-12 { 445 | right: 100%; 446 | } 447 | .col-sm-pull-11 { 448 | right: 91.66666667%; 449 | } 450 | .col-sm-pull-10 { 451 | right: 83.33333333%; 452 | } 453 | .col-sm-pull-9 { 454 | right: 75%; 455 | } 456 | .col-sm-pull-8 { 457 | right: 66.66666667%; 458 | } 459 | .col-sm-pull-7 { 460 | right: 58.33333333%; 461 | } 462 | .col-sm-pull-6 { 463 | right: 50%; 464 | } 465 | .col-sm-pull-5 { 466 | right: 41.66666667%; 467 | } 468 | .col-sm-pull-4 { 469 | right: 33.33333333%; 470 | } 471 | .col-sm-pull-3 { 472 | right: 25%; 473 | } 474 | .col-sm-pull-2 { 475 | right: 16.66666667%; 476 | } 477 | .col-sm-pull-1 { 478 | right: 8.33333333%; 479 | } 480 | .col-sm-pull-0 { 481 | right: auto; 482 | } 483 | .col-sm-push-12 { 484 | left: 100%; 485 | } 486 | .col-sm-push-11 { 487 | left: 91.66666667%; 488 | } 489 | .col-sm-push-10 { 490 | left: 83.33333333%; 491 | } 492 | .col-sm-push-9 { 493 | left: 75%; 494 | } 495 | .col-sm-push-8 { 496 | left: 66.66666667%; 497 | } 498 | .col-sm-push-7 { 499 | left: 58.33333333%; 500 | } 501 | .col-sm-push-6 { 502 | left: 50%; 503 | } 504 | .col-sm-push-5 { 505 | left: 41.66666667%; 506 | } 507 | .col-sm-push-4 { 508 | left: 33.33333333%; 509 | } 510 | .col-sm-push-3 { 511 | left: 25%; 512 | } 513 | .col-sm-push-2 { 514 | left: 16.66666667%; 515 | } 516 | .col-sm-push-1 { 517 | left: 8.33333333%; 518 | } 519 | .col-sm-push-0 { 520 | left: auto; 521 | } 522 | .col-sm-offset-12 { 523 | margin-left: 100%; 524 | } 525 | .col-sm-offset-11 { 526 | margin-left: 91.66666667%; 527 | } 528 | .col-sm-offset-10 { 529 | margin-left: 83.33333333%; 530 | } 531 | .col-sm-offset-9 { 532 | margin-left: 75%; 533 | } 534 | .col-sm-offset-8 { 535 | margin-left: 66.66666667%; 536 | } 537 | .col-sm-offset-7 { 538 | margin-left: 58.33333333%; 539 | } 540 | .col-sm-offset-6 { 541 | margin-left: 50%; 542 | } 543 | .col-sm-offset-5 { 544 | margin-left: 41.66666667%; 545 | } 546 | .col-sm-offset-4 { 547 | margin-left: 33.33333333%; 548 | } 549 | .col-sm-offset-3 { 550 | margin-left: 25%; 551 | } 552 | .col-sm-offset-2 { 553 | margin-left: 16.66666667%; 554 | } 555 | .col-sm-offset-1 { 556 | margin-left: 8.33333333%; 557 | } 558 | .col-sm-offset-0 { 559 | margin-left: 0%; 560 | } 561 | } 562 | @media (min-width: 992px) { 563 | .col, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { 564 | float: left; 565 | } 566 | .col-md-12 { 567 | width: 100%; 568 | } 569 | .col-md-11 { 570 | width: 91.66666667%; 571 | } 572 | .col-md-10 { 573 | width: 83.33333333%; 574 | } 575 | .col-md-9 { 576 | width: 75%; 577 | } 578 | .col-md-8 { 579 | width: 66.66666667%; 580 | } 581 | .col-md-7 { 582 | width: 58.33333333%; 583 | } 584 | .col-md-6 { 585 | width: 50%; 586 | } 587 | .col-md-5 { 588 | width: 41.66666667%; 589 | } 590 | .col-md-4 { 591 | width: 33.33333333%; 592 | } 593 | .col-md-3 { 594 | width: 25%; 595 | } 596 | .col-md-2 { 597 | width: 16.66666667%; 598 | } 599 | .col-md-1 { 600 | width: 8.33333333%; 601 | } 602 | .col-md-pull-12 { 603 | right: 100%; 604 | } 605 | .col-md-pull-11 { 606 | right: 91.66666667%; 607 | } 608 | .col-md-pull-10 { 609 | right: 83.33333333%; 610 | } 611 | .col-md-pull-9 { 612 | right: 75%; 613 | } 614 | .col-md-pull-8 { 615 | right: 66.66666667%; 616 | } 617 | .col-md-pull-7 { 618 | right: 58.33333333%; 619 | } 620 | .col-md-pull-6 { 621 | right: 50%; 622 | } 623 | .col-md-pull-5 { 624 | right: 41.66666667%; 625 | } 626 | .col-md-pull-4 { 627 | right: 33.33333333%; 628 | } 629 | .col-md-pull-3 { 630 | right: 25%; 631 | } 632 | .col-md-pull-2 { 633 | right: 16.66666667%; 634 | } 635 | .col-md-pull-1 { 636 | right: 8.33333333%; 637 | } 638 | .col-md-pull-0 { 639 | right: auto; 640 | } 641 | .col-md-push-12 { 642 | left: 100%; 643 | } 644 | .col-md-push-11 { 645 | left: 91.66666667%; 646 | } 647 | .col-md-push-10 { 648 | left: 83.33333333%; 649 | } 650 | .col-md-push-9 { 651 | left: 75%; 652 | } 653 | .col-md-push-8 { 654 | left: 66.66666667%; 655 | } 656 | .col-md-push-7 { 657 | left: 58.33333333%; 658 | } 659 | .col-md-push-6 { 660 | left: 50%; 661 | } 662 | .col-md-push-5 { 663 | left: 41.66666667%; 664 | } 665 | .col-md-push-4 { 666 | left: 33.33333333%; 667 | } 668 | .col-md-push-3 { 669 | left: 25%; 670 | } 671 | .col-md-push-2 { 672 | left: 16.66666667%; 673 | } 674 | .col-md-push-1 { 675 | left: 8.33333333%; 676 | } 677 | .col-md-push-0 { 678 | left: auto; 679 | } 680 | .col-md-offset-12 { 681 | margin-left: 100%; 682 | } 683 | .col-md-offset-11 { 684 | margin-left: 91.66666667%; 685 | } 686 | .col-md-offset-10 { 687 | margin-left: 83.33333333%; 688 | } 689 | .col-md-offset-9 { 690 | margin-left: 75%; 691 | } 692 | .col-md-offset-8 { 693 | margin-left: 66.66666667%; 694 | } 695 | .col-md-offset-7 { 696 | margin-left: 58.33333333%; 697 | } 698 | .col-md-offset-6 { 699 | margin-left: 50%; 700 | } 701 | .col-md-offset-5 { 702 | margin-left: 41.66666667%; 703 | } 704 | .col-md-offset-4 { 705 | margin-left: 33.33333333%; 706 | } 707 | .col-md-offset-3 { 708 | margin-left: 25%; 709 | } 710 | .col-md-offset-2 { 711 | margin-left: 16.66666667%; 712 | } 713 | .col-md-offset-1 { 714 | margin-left: 8.33333333%; 715 | } 716 | .col-md-offset-0 { 717 | margin-left: 0%; 718 | } 719 | } 720 | @media (min-width: 1200px) { 721 | .col, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { 722 | float: left; 723 | } 724 | .col-lg-12 { 725 | width: 100%; 726 | } 727 | .col-lg-11 { 728 | width: 91.66666667%; 729 | } 730 | .col-lg-10 { 731 | width: 83.33333333%; 732 | } 733 | .col-lg-9 { 734 | width: 75%; 735 | } 736 | .col-lg-8 { 737 | width: 66.66666667%; 738 | } 739 | .col-lg-7 { 740 | width: 58.33333333%; 741 | } 742 | .col-lg-6 { 743 | width: 50%; 744 | } 745 | .col-lg-5 { 746 | width: 41.66666667%; 747 | } 748 | .col-lg-4 { 749 | width: 33.33333333%; 750 | } 751 | .col-lg-3 { 752 | width: 25%; 753 | } 754 | .col-lg-2 { 755 | width: 16.66666667%; 756 | } 757 | .col-lg-1 { 758 | width: 8.33333333%; 759 | } 760 | .col-lg-pull-12 { 761 | right: 100%; 762 | } 763 | .col-lg-pull-11 { 764 | right: 91.66666667%; 765 | } 766 | .col-lg-pull-10 { 767 | right: 83.33333333%; 768 | } 769 | .col-lg-pull-9 { 770 | right: 75%; 771 | } 772 | .col-lg-pull-8 { 773 | right: 66.66666667%; 774 | } 775 | .col-lg-pull-7 { 776 | right: 58.33333333%; 777 | } 778 | .col-lg-pull-6 { 779 | right: 50%; 780 | } 781 | .col-lg-pull-5 { 782 | right: 41.66666667%; 783 | } 784 | .col-lg-pull-4 { 785 | right: 33.33333333%; 786 | } 787 | .col-lg-pull-3 { 788 | right: 25%; 789 | } 790 | .col-lg-pull-2 { 791 | right: 16.66666667%; 792 | } 793 | .col-lg-pull-1 { 794 | right: 8.33333333%; 795 | } 796 | .col-lg-pull-0 { 797 | right: auto; 798 | } 799 | .col-lg-push-12 { 800 | left: 100%; 801 | } 802 | .col-lg-push-11 { 803 | left: 91.66666667%; 804 | } 805 | .col-lg-push-10 { 806 | left: 83.33333333%; 807 | } 808 | .col-lg-push-9 { 809 | left: 75%; 810 | } 811 | .col-lg-push-8 { 812 | left: 66.66666667%; 813 | } 814 | .col-lg-push-7 { 815 | left: 58.33333333%; 816 | } 817 | .col-lg-push-6 { 818 | left: 50%; 819 | } 820 | .col-lg-push-5 { 821 | left: 41.66666667%; 822 | } 823 | .col-lg-push-4 { 824 | left: 33.33333333%; 825 | } 826 | .col-lg-push-3 { 827 | left: 25%; 828 | } 829 | .col-lg-push-2 { 830 | left: 16.66666667%; 831 | } 832 | .col-lg-push-1 { 833 | left: 8.33333333%; 834 | } 835 | .col-lg-push-0 { 836 | left: auto; 837 | } 838 | .col-lg-offset-12 { 839 | margin-left: 100%; 840 | } 841 | .col-lg-offset-11 { 842 | margin-left: 91.66666667%; 843 | } 844 | .col-lg-offset-10 { 845 | margin-left: 83.33333333%; 846 | } 847 | .col-lg-offset-9 { 848 | margin-left: 75%; 849 | } 850 | .col-lg-offset-8 { 851 | margin-left: 66.66666667%; 852 | } 853 | .col-lg-offset-7 { 854 | margin-left: 58.33333333%; 855 | } 856 | .col-lg-offset-6 { 857 | margin-left: 50%; 858 | } 859 | .col-lg-offset-5 { 860 | margin-left: 41.66666667%; 861 | } 862 | .col-lg-offset-4 { 863 | margin-left: 33.33333333%; 864 | } 865 | .col-lg-offset-3 { 866 | margin-left: 25%; 867 | } 868 | .col-lg-offset-2 { 869 | margin-left: 16.66666667%; 870 | } 871 | .col-lg-offset-1 { 872 | margin-left: 8.33333333%; 873 | } 874 | .col-lg-offset-0 { 875 | margin-left: 0%; 876 | } 877 | } 878 | .clearfix, 879 | .clearfix:before, 880 | .clearfix:after, 881 | .container:before, 882 | .container:after, 883 | .container-fluid:before, 884 | .container-fluid:after, 885 | .row:before, 886 | .row:after { 887 | content: " "; 888 | display: table; 889 | } 890 | .clearfix:after, 891 | .container:after, 892 | .container-fluid:after, 893 | .row:after { 894 | clear: both; 895 | } 896 | .center-block { 897 | display: block; 898 | margin-left: auto; 899 | margin-right: auto; 900 | } 901 | .pull-right { 902 | float: right !important; 903 | } 904 | .pull-left { 905 | float: left !important; 906 | } 907 | *, 908 | *:before, 909 | *:after { 910 | -webkit-box-sizing: border-box; 911 | -moz-box-sizing: border-box; 912 | box-sizing: border-box; 913 | } --------------------------------------------------------------------------------