GreenPolyProducts/polymer
5
0
Fork 0
mirror of https://github.com/Polymer/polymer.git synced 2025-02-25 18:55:30 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4 from sjmiles/master

Browse Source 
add g-icon-button
This commit is contained in:
Steve Orvell
2012-10-12 11:26:46 -07:00
parent eb5abe2bbd 4ac8d9a24f
commit fdf37963ce
4 changed files with 76 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/css/g-icon-button.css Normal file
View File

@@ -0,0 +1,27 @@
/*
* Copyright 2012 The Toolkitchen Authors. All rights reserved.
* Use of this source code is governed by a BSD-style
* license that can be found in the LICENSE file.
*/
@host {
display: inline-block;
box-sizing: border-box;
width: 40px;
height: 40px;
border: 1px solid transparent;
padding: 9px;
background: inherit;
cursor: pointer;
-webkit-transition: none;
}
@host:hover, @host.selected {
border: 1px solid rgba(0,0,0,0.16);
border-radius: 3px;
background: inherit;
opacity: 0.8;
}
@host:active {
opacity: 0.6;
}

31
src/g-icon-button.html Normal file
View File

@@ -0,0 +1,31 @@
<!--
/*
* Copyright 2012 The Toolkitchen Authors. All rights reserved.
* Use of this source code is governed by a BSD-style
* license that can be found in the LICENSE file.
*/
-->
<element name="g-icon-button" attributes="src, active">
<link rel="components" href="g-component.html">
<link rel="components" href="g-icon.html">
<link rel="stylesheet" href="css/g-icon-button.css" />
<template>
<g-icon id="icon"></g-icon>
</template>
<script>
this.component({
created: function() {
this.srcAttributeChanged();
this.activeAttributeChanged();
},
prototype: {
srcAttributeChanged: function() {
this.$.icon.src = this.src;
},
activeAttributeChanged: function() {
this.classList[this.active ? 'add' : 'remove']('selected');
}
}
});
</script>
</element>

8
src/g-icon.html
View File

@@ -3,12 +3,11 @@ Copyright 2012 The Toolkitchen Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<element name="g-icon" attributes="src" onclick="click" onselect="tabSelected">
<element name="g-icon" attributes="src">
<link rel="components" href="g-component.html">
<link rel="stylesheet" href="css/g-icon.css">
<template>
<!-- nodes with id automatically appear in this.$ hash -->
<div id="icon" class="icon" onclick="x('colorize')"></div>
<div id="icon" class="icon"></div>
</template>
<script>
this.component({
@@ -20,9 +19,6 @@ license that can be found in the LICENSE file.
srcAttributeChanged: function() {
this.$.icon.style.backgroundImage =
this.src ? 'url(' + this.src + ')' : null;
},
colorize: function() {
this.style.backgroundColor = "orange";
}
}
});

16
workbench/icon_button.html Normal file
View File

@@ -0,0 +1,16 @@
<!--
Copyright 2012 The Toolkitchen Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!DOCTYPE html>
<html>
<head>
<title>Icon Button</title>
<script src="../../polyfills/Components/components-polyfill.js" shimShadow></script>
<link rel="components" href="../../toolkit/src/g-icon-button.html">
</head>
<body>
<g-icon-button src="images/star_full.svg"></g-icon-button>
</body>
</html>