alfa-clock v1.0.0

alfa-clock

Polymer web component to display a clock.

use example:

   <link rel="import" href="alfa-clock.html">

    <style>
        alfa-clock {float: left;}
        alfa-clock.red{
            --seconds-color: red; 
            --ring-css: 6px solid red; 
            --hands-color: darkred; 
            --shadow-color: none; 
            --face-filter: invert(.5) sepia(5) saturate(25) hue-rotate(-45deg); 
        }
        alfa-clock.bigger{ --size: 400px; --brand-font: 2em Arial}
    </style>
    <alfa-clock></alfa-clock>
    <alfa-clock class="red" clock-brand="red clock"></alfa-clock>
    <alfa-clock class="bigger" clock-brand="bigger clock"></alfa-clock>

CSS API

face-filter

The clock face is made with SVG image containing numbers for hours.
To change the color of SVG, a CSS filter is applied.
--face-filter: invert(.5) sepia(5) saturate(25) hue-rotate(-45deg);
Try to manipulate saturation and hue-rotate to achieve desired color. It is hard, but blame the CSS committee.

Examples of colors:

--face-filter: invert(1); /* black */
--face-filter: invert(.5) sepia(1) saturate(5) hue-rotate(60deg);  /* green */
--face-filter: invert(.5) sepia(5) saturate(25) hue-rotate(-45deg); /* red */

Demo

<alfa-clock></alfa-clock>