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:
I hereby claim:
To claim this, I am signing this object:
<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; |
/* Namespaces */ | |
#fancyNamespace { | |
.button () { | |
display: block; | |
background: mix(@color2, @color1, 50%); | |
border: @borderWidth solid @black; | |
} | |
.round-corner(@radius) { | |
border-radius: @radius; |
/* Math */ | |
round(1.67); /* returns `2` */ | |
ceil(2.4); /* returns `3` */ | |
floor(2.6); /* returns `2` */ | |
percentage(0.5); /* returns `50% */ |
/* 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 */ |
/* 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 */ |
/* Operations */ | |
@borderLarger: @borderSmall * 2; | |
@blackLighter: @black - #333; | |
@boxWidth: 100%; | |
@boxHalfWidth: @boxWidth / 2; | |
@boxPlusTen: @boxWidth + 10; | |
@boxSameWidth: (100% / 2) * 2; |
/* @arguments */ | |
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { | |
box-shadow: @arguments; | |
-moz-box-shadow: @arguments; | |
-webkit-box-shadow: @arguments; | |
} |
/* Mixins */ | |
.rounded { | |
border-radius: @radiusMedium; | |
-webkit-border-radius: @radiusMedium; | |
-moz-border-radius: @radiusMedium; | |
} | |
/* Parametric Mixins */ | |
.border-radius(@radius) { |
/* Variables */ | |
@color: #ff0000; | |
@color1: #00ff00; | |
@color2: #0000ff; | |
@alert: #C60F13; | |
@black: #000000; | |
@radiusSmall: 3px; |