caribou-timer - Vaadin Add-on Directory
caribou-timer is a timer element, built using Polymer
**[ This description is mirrored from README.md at [github.com/caribouflex/caribou-timer](https://github.com//caribouflex/caribou-timer/blob/v1.0.0/README.md) on 2019-05-10 ]**
[](https://beta.webcomponents.org/element/PolymerElements/caribou-timer)
## <caribou-timer>
`` is a Polymer 2 element used to display a timer (Android style)
This element allow you to set a default time. This time can be edited with the plus and minus button.
Or if the attribute 'input-time' is added, it can be edited with the keyboard and the arrow key.
A maximum and minimum limit can be set
Moreover you can set the 'remaining-time' property. If set this property will automatically start the timer,
a the specific point according to the whole-time value
Example:
'
### Styling The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--editable-text-color` | Time color on the editable field (inputTime=true) | `#64B5F6`
`--editable-text-color-disabled` | Time color on the editable field disabled (inputTime=true) | `#64B5F6`
`--non-editable-text-color`| Time color on the non editable field (inputTime=false)| `#64B5F6`
`--time-button-color`| Plus and minus button color | `#64B5F6`
`--time-button-color-disabled`| Disabled plus and disabled minus button color | `#64B5F6`
`--time-button-color-hover`| Plus and minus button color hover | `#64B5F6`
`--circle-line-passed-color`| Color of the passed circle line | `#64B5F6`
`--circle-line-remaining-color`| Color of the remaining circle line | `#64B5F6`
`--circle-line-endpoint-fill-color`| Fill color or the little circle at the edge of the progression line | `#64B5F6`
`--circle-line-endpoint-stroke-color` | Stroke color or the little circle at the edge of the progression line |`#64B5F6`
`--button-start-color` | Button start color | `#64B5F6`
`--button-pause-color`| Button pause color | `#64B5F6`
`--button-start-color-hover`| Button start color on hover | `#64B5F6`
`--button-pause-color-hover`| Button pause color on hover | `#64B5F6`
## Usage
```html
```
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
## Running tests from the command line
When in the caribou-timer directory, run polymer test
## License
Apache License 2.0
GitHub Homepage
Issue tracker
License
View on GitHub
Online Demo
Documentation
caribou-timer version 0.1-alpha
### Dependencies
Polymer/polymer#^2.0.0
* PolymerElements/iron-input#^2.0.1
* PolymerElements/paper-icon-button#^2.0.1
* PolymerElements/iron-iconset-svg#^2.1.0
caribou-timer version 0.1-alpha.1
### Dependencies
Polymer/polymer#^2.0.0
* PolymerElements/iron-input#^2.0.1
* PolymerElements/paper-icon-button#^2.0.1
* PolymerElements/iron-iconset-svg#^2.1.0
caribou-timer version 1.0-alpha.1
### Dependencies
Polymer/polymer#^2.0.0
* PolymerElements/iron-input#^2.0.1
* PolymerElements/paper-icon-button#^2.0.1
* PolymerElements/iron-iconset-svg#^2.1.0
caribou-timer version 1.0.0-alpha1
### Dependencies
Polymer/polymer#^2.0.0
* PolymerElements/iron-input#^2.0.1
* PolymerElements/paper-icon-button#^2.0.1
* PolymerElements/iron-iconset-svg#^2.1.0
caribou-timer version 1.0.0-alpha2
### Dependencies
Polymer/polymer#^2.0.0
* PolymerElements/iron-input#^2.0.1
* PolymerElements/paper-icon-button#^2.0.1
* PolymerElements/iron-iconset-svg#^2.1.0
caribou-timer version 1.0.0
### Dependencies
Polymer/polymer#^2.0.0
* PolymerElements/iron-input#^2.0.1
* PolymerElements/paper-icon-button#^2.0.1
* PolymerElements/iron-iconset-svg#^2.1.0