https://github.com/dabolus/cookie-consent
A material design cookie consent.
https://github.com/dabolus/cookie-consent
bower cookie-consent polymer polymer-element web-component
Last synced: 6 months ago
JSON representation
A material design cookie consent.
- Host: GitHub
- URL: https://github.com/dabolus/cookie-consent
- Owner: Dabolus
- License: mit
- Created: 2017-05-13T12:57:44.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-11-13T21:10:49.000Z (almost 7 years ago)
- Last Synced: 2025-04-13T21:06:19.620Z (6 months ago)
- Topics: bower, cookie-consent, polymer, polymer-element, web-component
- Language: HTML
- Size: 337 KB
- Stars: 11
- Watchers: 3
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# \
[](https://www.webcomponents.org/element/Dabolus/cookie-consent)
[](https://travis-ci.org/Dabolus/cookie-consent)
[](https://github.com/Dabolus/cookie-consent)
_[Demo and API docs](https://www.webcomponents.org/element/Dabolus/cookie-consent)_
A great, simple and fully customizable material design cookie consent that automatically
shows up only to the users subject to the cookie law (EU users).
## Features
- Ready out of the box. Just include it and insert a ``
in your web app and you are ready to go!
- Fully customizable. It can be completely styled and it supports a lot of properties that
allows you to easily change its default behavior.
- Easily detect what the user does. The readonly `cookies-status` property can be binded to
detect whether the user consent is `pending`, `accepted` or `rejected`. It also fires a
`cookies-status-changed` event when the user responds, so you can wait for the user to
accept or reject the cookies before doing something with their data.
- Tested using the [web-component-tester](https://github.com/Polymer/web-component-tester)
## Installation
```
bower install --save cookie-consent
```
## Usage
#### Basic usage
```html
```
#### Custom text, policy link and consent rejection
```html
```
#### Full customization
You can even set an empty text and then use a span with the class `.text` to insert anything
you want (icons, etc.). The same can be done with the policy link. Just use the `.policy-link`
class in an anchor tag inside the `cookie-consent`.
```html
This website uses cookies
Yay!
```
_**Note:** the user response is saved by default in a permanent cookie.
You can change this behavior by adding the `use-local-storage`
or the `use-session-storage` properties._
## Styling
The following custom properties and mixins are available for styling:
| Custom property | Description | Default |
| ------------------------------------ | ---------------------------------------------------------------- | ----------------------- |
| `--cookie-consent-background-color` | The background color of the cookie consent | `#323232` |
| `--cookie-consent-text-color` | The color of text in the cookie consent | `#f1f1f1` |
| `--cookie-consent-policy-link-color` | The color of the link to the cookie policy | `--light-accent-color` |
| `--cookie-consent-reject-text-color` | The main color of the button to reject the cookie policy | `--disabled-text-color` |
| `--cookie-consent-reject-background` | The background of the button to reject the cookie policy | `transparent` |
| `--cookie-consent-reject-ink-color` | The color of the ink displayed when the reject button is pressed | `--disabled-text-color` |
| `--cookie-consent-accept-text-color` | The main color of the button to accept the cookie policy | `--accent-color` |
| `--cookie-consent-accept-background` | The background of the button to accept the cookie policy | `transparent` |
| `--cookie-consent-accept-ink-color` | The color of the ink displayed when the accept button is pressed | `--accent-color` |
| `--cookie-consent-accept-button` | Mixin applied to the accept button | `{}` |
| `--cookie-consent-reject-button` | Mixin applied to the reject button | `{}` |
| `--cookie-consent-buttons` | Mixin applied to both the accept and reject buttons | `{}` |
| `--cookie-consent-policy-link` | Mixin applied to the policy link | `{}` |
| `--cookie-consent-text` | Mixin applied to the cookie consent text | `{}` |
| `--cookie-consent-toast` | Mixin applied to the cookie consent toast | `{}` |
| `--cookie-consent` | Mixin applied to the cookie consent | `{}` |
This element uses `paper-toast` to display the consent. `paper-toast` applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`.
In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`.