├── .gitignore ├── .gitattributes ├── README.md ├── bower.json ├── demo.html ├── index.html ├── cw-token-field.css ├── cw-options-list.html └── cw-token-field.html /.gitignore: -------------------------------------------------------------------------------- 1 | .bowerrc 2 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Set the default behavior, in case people don't have core.autocrlf set. 2 | * text=auto -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | cw-token-field 2 | ================ 3 | 4 | See the [component page](http://cletusw.github.io/cw-token-field) for more information. 5 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cw-token-field", 3 | "description": "A tagging/tokenizing input (a.k.a. pill box).", 4 | "homepage": "http://github.com/cletusw/cw-token-field", 5 | "license": "MIT", 6 | "main": "cw-token-field.html", 7 | "keywords": [ 8 | "Polymer", 9 | "web-components" 10 | ], 11 | "ignore": [ 12 | "**/.*" 13 | ], 14 | "dependencies": { 15 | "cw-autosize-input": "~0.1.2", 16 | "polymer": "Polymer/polymer#master" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | cw-token-field Demo 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

An example of using <cw-token-field>:

15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /cw-token-field.css: -------------------------------------------------------------------------------- 1 | :host { 2 | background-color: #fff; 3 | border: 1px solid #aaa; 4 | cursor: text; 5 | display: inline-block; 6 | font-size: 14px; 7 | margin: 2px; 8 | padding: 0.142856em; 9 | position: relative; 10 | width: 200px; 11 | } 12 | 13 | polyfill-next-selector { content: ':host > .selected'; } 14 | .selected { 15 | background-color: #ededed; 16 | border: 1px solid #d9d9d9; 17 | border-radius: 0.214284em; 18 | cursor: default; 19 | float: left; 20 | margin: 0.142856em; 21 | padding: 0.142856em 0.214284em; 22 | } 23 | 24 | .unselect { 25 | color: #000; 26 | cursor: pointer; 27 | font-family: Arial; 28 | font-weight: bold; 29 | opacity: .2; 30 | } 31 | 32 | input { 33 | -webkit-appearance: none; 34 | background: none; 35 | border: 0; 36 | box-sizing: border-box; 37 | color: inherit; 38 | float: left; 39 | font: inherit; 40 | letter-spacing: inherit; 41 | line-height: 1.19 !important; 42 | margin: 1px 0; 43 | max-width: 100%; 44 | min-width: 1.8em; 45 | outline: none; 46 | padding: 0.285712em 0.142856em; 47 | text-align: inherit; 48 | text-indent: inherit; 49 | text-shadow: inherit; 50 | text-transform: inherit; 51 | vertical-align: baseline; 52 | word-spacing: inherit; 53 | } 54 | 55 | input.maximize-width { 56 | width: 100% !important; 57 | } 58 | 59 | cw-options-list { 60 | background: #fff; 61 | border: 1px solid #aaa; 62 | border-top: 0; 63 | box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); 64 | left: -1px; 65 | margin: 0; 66 | padding: 0; 67 | position: absolute; 68 | top: calc(100% + 2px); 69 | width: 100%; 70 | } 71 | 72 | cw-options-list[hidden] { 73 | display: none !important; 74 | } 75 | -------------------------------------------------------------------------------- /cw-options-list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 43 | 44 | 150 | 151 | 152 | -------------------------------------------------------------------------------- /cw-token-field.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 21 | 22 | 23 | 34 | 35 | 148 | 149 | 150 | --------------------------------------------------------------------------------