mannyblum

Keybase proof

I hereby claim:

• I am mannyblum on github.
• I am mannyblum (https://keybase.io/mannyblum) on keybase.
• I have a public key ASBji1O0U1tRiG_xL3IjmqmehRgNwHlQC-fWiwyKmpU_NQo

To claim this, I am signing this object:

mannyblum

<link rel="import" href="../code-mirror/code-mirror.html">
<link rel="import" href="../google-map/google-map.html">
<link rel="import" href="../cool-clock/cool-clock.html">

<polymer-element name="my-element">

  <template>
    <style>    
      :host {
        position: absolute;

mannyblum

/* Namespaces */

#fancyNamespace {
  .button () {
    display: block;
    background: mix(@color2, @color1, 50%);
    border: @borderWidth solid @black;
  }
  .round-corner(@radius) {
    border-radius: @radius;

mannyblum

/* Math */

round(1.67); /* returns `2` */
ceil(2.4);   /* returns `3` */
floor(2.6);  /* returns `2` */

percentage(0.5); /* returns `50% */

mannyblum

/* Color Extraction */

hue(@color);        /* returns the `hue` channel of @color */
saturation(@color); /* returns the `saturation` channel of @color */
lightness(@color);  /* returns the 'lightness' channel of @color */
alpha(@color);      /* returns the 'alpha' channel of @color */

mannyblum

/* Color */

.color-game() {
  background: lighten(@color, 10%);     /* return a color which is 10% *lighter* than @color */
  background: darken(@color, 10%);      /* return a color which is 10% *darker* than @color */

  background: saturate(@color, 10%);    /* return a color 10% *more* saturated than @color */
  background: desaturate(@color, 10%);  /* return a color 10% *less* saturated than @color */

  background: fadein(@color, 10%);      /* return a color 10% *less* transparent than @color */

mannyblum

/* Operations */

@borderLarger: @borderSmall * 2;
@blackLighter: @black - #333;

@boxWidth: 100%;
@boxHalfWidth: @boxWidth / 2;
@boxPlusTen: @boxWidth + 10;

@boxSameWidth: (100% / 2) * 2;

mannyblum

 /* @arguments */

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}

mannyblum

/* Mixins */

.rounded {
  border-radius: @radiusMedium;
  -webkit-border-radius: @radiusMedium;
  -moz-border-radius: @radiusMedium;
}

/* Parametric Mixins */
.border-radius(@radius) {

mannyblum

/* Variables */

@color: #ff0000;
@color1: #00ff00;
@color2: #0000ff;

@alert: #C60F13;
@black: #000000;

@radiusSmall: 3px;