Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Commit

Permalink
Merge pull request #8 from Polymer/master
Browse files Browse the repository at this point in the history
8/8 master -> stable
  • Loading branch information
dfreedm committed Aug 8, 2013
2 parents ca40352 + d727f02 commit cd620d0
Show file tree
Hide file tree
Showing 28 changed files with 352 additions and 166 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/docs

/node_modules
build.bat
5 changes: 3 additions & 2 deletions gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,21 @@
*/
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
yuidoc: {
compile: {
name: '<%= pkg.name %>',
description: '<%= pkg.description %>',
version: '<%= pkg.version %>',
url: '<%= pkg.homepage %>',
options: {
exclude: 'third_party',
exclude: 'docs',
extension: '.js,.html',
paths: '.',
outdir: 'docs',
linkNatives: 'true',
tabtospace: 2,
themedir: 'tools/doc/themes/footstrap'
themedir: 'tools/doc/themes/polymerase'
}
}
},
Expand Down
23 changes: 23 additions & 0 deletions polymer-ui-arrow/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@

<!doctype html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
<title>Arrows</title>
<script src="../../polymer/polymer.js"></script>
<link rel="import" href="polymer-ui-arrow.html">
</head>
<body style="background: whitesmoke;">
<polymer-ui-arrow direction="up"></polymer-ui-arrow>
<br><br>
<polymer-ui-arrow direction="down" size="20" color="whitesmoke" borderWidth="8"></polymer-ui-arrow>
<br><br>
<polymer-ui-arrow direction="right" size="30" color="blue" borderColor="lightblue" borderWidth="6"></polymer-ui-arrow>
<br><br>
<polymer-ui-arrow direction="left" color="#aaa" borderColor="#aaa"></polymer-ui-arrow>
</body>
</html>
20 changes: 20 additions & 0 deletions polymer-ui-arrow/polymer-ui-arrow.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
@host {
* {
display: inline-block;
position: relative;
overflow: hidden;
}

[hidden], .hidden {
display: none;
}
}

.arrow {
border-color: transparent;
border-style: solid;
}

.arrow-inner {
position: absolute;
}
79 changes: 79 additions & 0 deletions polymer-ui-arrow/polymer-ui-arrow.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
* @module Polymer UI Elements
*/
/**
* @class polymer-ui-arrow
*/
-->
<polymer-element name="polymer-ui-arrow" attributes="direction size color borderColor borderWidth">
<template>
<link rel="stylesheet" href="polymer-ui-arrow.css">
<div id="outer" class="arrow arrow-outer" style="border-width: {{size}}px;"></div>
<div id="inner" class="arrow arrow-inner" style="border-width: {{size}}px;"></div>
</template>
<script>
Polymer('polymer-ui-arrow', {
borders: {
up: 'Bottom',
down: 'Top',
left: 'Right',
right: 'Left'
},
tops: {
up: 1,
down: -1,
left: 0,
right: 0
},
lefts: {
up: 0,
down: 0,
left: 1,
right: -1
},
direction: 'up',
size: 10,
color: '#fff',
borderColor: '#ccc',
borderWidth: 1,
ready: function() {
this.asyncUpdate();
},
directionChanged: function() {
this.asyncUpdate();
},
sizeChanged: function() {
this.asyncUpdate();
},
colorChanged: function() {
this.asyncUpdate();
},
borderColorChanged: function() {
this.asyncUpdate();
},
borderWidthChanged: function() {
this.asyncUpdate();
},
asyncUpdate: function() {
this.updateJob = this.job(this.updateJob, this.update, 1);
},
update: function() {
var os = this.$.outer.style;
var is = this.$.inner.style;
os.borderColor = 'transparent';
is.borderColor = 'transparent';
var bc = 'border' + this.borders[this.direction] + 'Color';
os[bc] = this.borderColor;
is[bc] = this.color;
is.top = this.tops[this.direction] * this.borderWidth + 'px';
is.left = this.lefts[this.direction] * this.borderWidth + 'px';
}
});
</script>
</polymer-element>
16 changes: 13 additions & 3 deletions polymer-ui-field/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@
<title>Polymer UI Field</title>
<script src="../../polymer/polymer.js" debug></script>
<link rel="import" href="polymer-ui-field.html" />
<link rel="import" href="../polymer-ui-icon/polymer-ui-icon.html" />
<link rel="import" href="../polymer-ui-icon-button/polymer-ui-icon-button.html" />
<link rel="import" href="../polymer-ui-menu-button/polymer-ui-menu-button.html" />
<style>
html {
font-family: 'Helvetica Neue', 'Roboto', 'Arial', sans-serif;
Expand All @@ -14,9 +16,17 @@
</style>
</head>
<body>
<polymer-ui-field>
<polymer-ui-icon-button icon="add"></polymer-ui-icon-button>
<input value="Field input">
<polymer-ui-field>
<polymer-ui-icon icon="contact"></polymer-ui-icon>
<input placeholder="hi!">
</polymer-ui-field>
<polymer-ui-field>
<polymer-ui-icon icon="plus"></polymer-ui-icon>
<label>I'm a label!</label>
<input placeholder="I have a label">
</polymer-ui-field>
<polymer-ui-field>
<input placeholder="I have no icon">
</polymer-ui-field>
</body>
</html>
34 changes: 24 additions & 10 deletions polymer-ui-field/polymer-ui-field.html
Original file line number Diff line number Diff line change
@@ -1,31 +1,45 @@
<link rel="import" href="../../polymer-elements/polymer-flex-layout/polymer-flex-layout.html">

<polymer-element name="polymer-ui-field">
<template>
<style>
@host {
* {
display: block;
padding: 18px;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
color: #333;
font-size: 14px;
}
}
/*@polyfill @host > polymer-ui-icon*/
::-webkit-distributed(> polymer-ui-icon) {
margin: 18px;
}
/*@polyfill @host > polymer-ui-menu-button*/
::-webkit-distributed(> polymer-ui-menu-button) {
margin: 8px;
}
/*@polyfill @host input*/
::-webkit-distributed(input) {
font-size: 14px;
height: 40px;
background: transparent;
color: #333;
border: 0;
padding: 0;
font-size: 14px;
flex: 1 auto;
}
/*@polyfill @host input:focus*/
::-webkit-distributed(input:focus) {
outline: none;
}
/*@polyfill @host input::placeholder*/
::-webkit-distributed(input::placeholder) {
color: #b3b3b3;
}
div {
display: flex;
flex-direction: row;
}
</style>
<div>
<content select="*"></content>
</div>
<polymer-flex-layout align="center"></polymer-flex-layout>
<content select="polymer-ui-icon,polymer-ui-icon-button,polymer-ui-menu-button"></content>
<content select="*"></content>
</template>
<script>
Polymer('polymer-ui-field');
Expand Down
47 changes: 37 additions & 10 deletions polymer-ui-icon-button/polymer-ui-icon-button.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,52 @@ license that can be found in the LICENSE file.
display: inline-block;
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 44px;
height: 44px;
padding: 10px;
width: 38px;
height: 38px;
background-image: none;
border-radius: 2px;
padding: 7px;
margin: 2px;
vertical-align: middle;
cursor: pointer;
background: url(btn_light.png) top left no-repeat;
background-size: cover;
}

.outline {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

*:hover {
background-position: 0 -44px;
*:hover, .hover {
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.1);
}

*.selected {
background-position: 0 -88px;
.selected {
background-color: rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.12);
}

*:active, *.selected:active {
background-position: 0 -132px;
background-color: rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.polymer-ui-dark-theme.outline {
background-color: rgba(200, 200, 200, 0.05);
box-shadow: 0 0 0 1px rgba(200, 200, 200, 0.1);
}

.polymer-ui-dark-theme:hover, .polymer-ui-dark-theme.hover {
background-color: rgba(200, 200, 200, 0.05);
box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.12), 0 0 0 1px rgba(200, 200, 200, 0.1);
}

.polymer-ui-dark-theme.selected {
background-color: rgba(220, 220, 220, 0.05);
box-shadow: inset 0 1px 0 0 rgba(200, 200, 200, 0.05), 0 0 0 1px rgba(200, 200, 200, 0.12);
}

.polymer-ui-dark-theme:active, .polymer-ui-dark-theme.selected:active {
background-color: rgba(200, 200, 200, 0.05);
box-shadow: inset 0 1px 0 0 rgba(200, 200, 200, 0.1), 0 0 0 1px rgba(200, 200, 200, 0.12);
}
}

Expand Down
2 changes: 1 addition & 1 deletion polymer-ui-icon-button/polymer-ui-icon-button.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@

<link rel="import" href="../polymer-ui-icon/polymer-ui-icon.html">

<polymer-element name="polymer-ui-icon-button" attributes="src index icon active">
<polymer-element name="polymer-ui-icon-button" extends="polymer-ui-theme-aware" attributes="src index icon active">
<template>
<link rel="stylesheet" href="polymer-ui-icon-button.css">
<polymer-ui-icon src="{{src}}" index="{{index}}" icon="{{icon}}"><content></content></polymer-ui-icon>
Expand Down
13 changes: 11 additions & 2 deletions polymer-ui-menu-button/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,12 @@
<polymer-ui-icon-button icon="menu"></polymer-ui-icon-button>
<div flex>Toolbar: polymer-ui-light-theme</div>
<polymer-ui-icon-button icon="refresh"></polymer-ui-icon-button>
<polymer-ui-menu-button selected="0" valign="right">
<polymer-ui-menu-button selected="0" align="right">
<polymer-ui-menu-item icon="settings" label="Settings"></polymer-ui-menu-item>
<polymer-ui-menu-item icon="dialog" label="Dialog"></polymer-ui-menu-item>
<polymer-ui-menu-item icon="search" label="Search"></polymer-ui-menu-item>
</polymer-ui-menu-button>
<polymer-ui-menu-button selected="0" valign="right">
<polymer-ui-menu-button selected="0" align="right">
<polymer-ui-menu-item icon="settings" label="Settings"></polymer-ui-menu-item>
<polymer-ui-menu-item icon="dialog" label="Dialog"></polymer-ui-menu-item>
<polymer-ui-menu-item icon="search" label="Search"></polymer-ui-menu-item>
Expand All @@ -46,6 +46,15 @@
<polymer-ui-menu-item icon="dialog" label="Dialog"></polymer-ui-menu-item>
<polymer-ui-menu-item icon="search" label="Search"></polymer-ui-menu-item>
</polymer-ui-menu-button>
<polymer-ui-menu-button selected="0" theme="polymer-ui-light-theme" valign="top">
<polymer-ui-menu-item icon="settings" label="Settings"></polymer-ui-menu-item>
<polymer-ui-menu-item icon="dialog" label="Dialog"></polymer-ui-menu-item>
<polymer-ui-menu-item icon="search" label="Search"></polymer-ui-menu-item>
</polymer-ui-menu-button>
<polymer-ui-menu-button selected="0" theme="polymer-ui-light-theme" valign="top">
<polymer-ui-menu-item icon="settings" label="Settings"></polymer-ui-menu-item>
<polymer-ui-menu-item icon="dialog" label="Dialog"></polymer-ui-menu-item>
</polymer-ui-menu-button>
<br><br><br><br><br><br><br><br><br><br>
</div>
</body>
Expand Down
25 changes: 22 additions & 3 deletions polymer-ui-menu-button/polymer-ui-menu-button.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
}

#menuOverlay {
position: absolute;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: white;
Expand All @@ -16,14 +17,18 @@
margin: 7px 0 0 7px;
}

#menuOverlay[valign=right] {
#menuOverlay[align=right] {
position: absolute !important;
right: 10px;
}

#menuOverlay[valign=top] {
bottom: 36px;
}

@media screen and (max-width: 800px) {
#menuOverlay,
#menuOverlay[valign=right] {
#menuOverlay[align=right] {
left: 0;
width: 100%;
-webkit-transform: none;
Expand All @@ -38,7 +43,7 @@

#arrow {
position: absolute;
bottom: -8px;
bottom: -10px;
}

.arrow {
Expand All @@ -63,3 +68,17 @@
border-bottom-color: white;
margin-top: -16px;
}

#arrow[valign=top] {
top: -10px;
}

[valign=top] .arrow {
margin: 0px 4px 0;
border-color: #cfcfcf transparent transparent transparent;
}

[valign=top] .arrow-inner {
border-top-color: white;
margin-top: -18px;
}
Loading

0 comments on commit cd620d0

Please sign in to comment.