https://github.com/oscarmarina/notifications-bubbles
https://github.com/oscarmarina/notifications-bubbles
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/oscarmarina/notifications-bubbles
- Owner: oscarmarina
- Created: 2017-09-27T13:24:40.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-10-03T11:55:08.000Z (over 7 years ago)
- Last Synced: 2025-02-08T09:13:03.754Z (4 months ago)
- Language: HTML
- Size: 10.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Manejar los estilos con Polymer
### Básicamente tenemos 3 sitios para hacerlo: ( _A día de hoy_ )
_El primer lugar_ es en los propios estilos del componente, aquí vamos a
generar las variables y mixins que luego usaremos para poder cambiar su aspecto.
```css
:host {
will-change: transform;
font-family: var(--fontDefault, sans-serif);
position: relative;
display: block;
@apply --notifications-bubbles; }
:host([hidden]) {
display: none; }
```
_La segunda parte_ es el uso de la [etiqueta style is="custom-style"](https://www.polymer-project.org/1.0/docs/devguide/styling#custom-style), con la que
podremos manejar las variables y mixins de nuestros componentes.
Para ellos usaremos un “tema”.
Para este caso estan en la __carpeta /theme/__ de nuestro componente, en "cells-theme-base.html" descomentamos el codigo.
```html
notifications-bubbles {
--notifications-bubbles-background-color: var(--light-green-300);
--notifications-bubbles-border-color: var(--light-green-600);
--notifications-bubbles-color: var(--light-green-700);
}
```
_Y por último_, tenemos los [shared-style](https://www.polymer-project.org/1.0/docs/devguide/styling#style-modules) no es para la definición de estilos tal cual, si no que lo usamos en el momento
que necesitemos realizar algún cambio que no es posible desde una etiqueta custom-style, se trata
de un cambio muy específico de nuestra APP, que no pueden ir como propios del componente.
Para este caso estan la __carpeta /theme/__ de nuestro componente en "cells-theme-base-shared.html"
En la __carpeta /demo/__ en archivo *index.html* quitamos el atributo hidden a:
```html
Motion Notification
```
## notifications-bubbles
Lanzar con "polymer serve" añadir a la ruta *?dom=shadow&lazyRegister="max"&useNativeCSSProperties=true*
```html
```