Skip to content
This repository was archived by the owner on Sep 19, 2024. It is now read-only.

Commit 53db16f

Browse files
greenyousegreenyouse
committed
initial commit
0 parents  commit 53db16f

10 files changed

+326
-0
lines changed

‎.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
bower_components
2+
dist
3+
node_modules
4+
build
5+
.tern-port

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT LICENSE
2+
3+
Copyright (c) 2017 Ed Babcock
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

‎README.md

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# \<bottom-button\> [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/greenyouse/bottom-button)
2+
3+
A full width bottom button for mobile.
4+
5+
<!--
6+
```
7+
<custom-element-demo>
8+
<template>
9+
<script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
10+
<link rel="import" href="../app-layout/demo/sample-content.html">
11+
<link rel="import" href="../iron-demo-helpers/demo-pages-shared-styles.html">
12+
<link rel="import" href="../iron-demo-helpers/demo-snippet.html">
13+
<link rel="import" href="../bottom-button.html">
14+
<next-code-block></next-code-block>
15+
<template></template>
16+
</custom-element-demo>
17+
```
18+
-->
19+
20+
```html
21+
<bottom-button>Add to Cart</bottom-button>
22+
<sample-content size="10"></sample-content>
23+
```
24+
25+
## Installation
26+
27+
```sh
28+
$ bower install greenyouse/bottom-button --save
29+
```
30+
31+
## Import
32+
33+
```html
34+
<link rel="import" href="/bower_components/bottom-nav/bottom-button.html">
35+
```

‎bottom-button.html

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<link rel="import" href="../bottom-nav/bottom-nav.html">
2+
<link rel="import" href="../paper-button/paper-button.html">
3+
<link rel="import" href="../paper-ripple/paper-ripple.html">
4+
<link rel="import" href="../polymer/polymer.html">
5+
6+
<!--
7+
`bottom-button` is a full width button for mobile. This is typically used as a
8+
call-to-action button when viewing some inventory on the screen.
9+
10+
It may be either monochrome or have an inner border. By default the monochrome
11+
styling is used. The inner border button may be better for conveying a less
12+
urgent message.
13+
14+
Example:
15+
16+
<bottom-button>Add to Cart</bottom-button>
17+
<bottom-button border>Invite Friends</bottom-button>
18+
19+
Custom property | Description | Default
20+
----------------|-------------|----------
21+
`--bottom-button` | Mixin applied to the button | `{}`
22+
`--bottom-button-background-color` | Background color of the button | `--accent-color`
23+
`--bottom-button-text-color` | Color of the text for monochrome | `--dark-theme-text-color`
24+
`--bottom-button-inner-background` | Background color of the inner border button | `--light-theme-background-color`
25+
26+
@demo demo/index.html
27+
-->
28+
29+
<dom-module id="bottom-button">
30+
<template>
31+
<style is="custom-style">
32+
:host {
33+
display: block;
34+
35+
--paper-button: {
36+
border-radius: 0;
37+
margin: 0;
38+
padding: 0;
39+
}
40+
41+
@apply(--bottom-button);
42+
}
43+
44+
paper-button {
45+
font-weight: 500;
46+
height: 64px;
47+
width: 100%;
48+
}
49+
50+
.monochrome {
51+
background-color: var(--bottom-button-background-color, --accent-color);
52+
color: var(--bottom-button-text-color, --dark-theme-text-color);
53+
}
54+
55+
.border {
56+
background-color: var(--bottom-button-inner-background, --light-theme-background-color);
57+
border: 2px solid var(--bottom-button-background-color, --accent-color);
58+
border-radius: 0;
59+
color: var(--accent-color);
60+
height: 49px;
61+
margin: 15px;
62+
padding: 15px;
63+
width: calc(100% - 30px);
64+
}
65+
66+
.container {
67+
background-color: var(--bottom-button-inner-background, --light-theme-background-color);
68+
}
69+
70+
paper-ripple {
71+
color: var(--bottom-button-background-color, --accent-color);
72+
z-index: 1;
73+
}
74+
</style>
75+
<bottom-nav fixed>
76+
<div class="container">
77+
<paper-ripple hidden="{{!_setClass(border)}}"></paper-ripple>
78+
<paper-button class$="{{_setClass(border)}}">
79+
<content></content>
80+
</paper-button>
81+
</div>
82+
</bottom-nav>
83+
</template>
84+
85+
<script>
86+
Polymer({
87+
88+
is: 'bottom-button',
89+
90+
properties: {
91+
border: {
92+
type: Boolean,
93+
value: false
94+
}
95+
},
96+
97+
_setClass: function(border) {
98+
return border ? 'border' : 'monochrome';
99+
}
100+
101+
});
102+
</script>
103+
</dom-module>

‎bower.json

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "bottom-button",
3+
"description": "Full width bottom button for mobile",
4+
"main": "bottom-button.html",
5+
"keywords": [
6+
"web-components",
7+
"polymer",
8+
"bottom-button",
9+
"bottom"
10+
],
11+
"ignore": [
12+
".*",
13+
"bower_components",
14+
"demo",
15+
"test"
16+
],
17+
"authors": [
18+
"Ed Babcock <[email protected]>",
19+
],
20+
"license": "MIT",
21+
"repository": {
22+
"type": "git",
23+
"url": "git://github.com/greenyouse/bottom-button"
24+
},
25+
"dependencies": {
26+
"polymer": "Polymer/polymer#^1.4.0",
27+
"bottom-nav": "greenyouse/bottom-nav#^0.2.0",
28+
"paper-button": "PolymerElements/paper-button#^1.0.14"
29+
},
30+
"devDependencies": {
31+
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
32+
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
33+
"web-component-tester": "^4.0.0",
34+
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
35+
}
36+
}

‎demo/border.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6+
7+
<title>bottom-button demo</title>
8+
9+
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10+
11+
<link rel="import" href="../../app-layout/demo/sample-content.html">
12+
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
13+
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
14+
<link rel="import" href="../bottom-button.html">
15+
16+
<style is="custom-style" include="demo-pages-shared-styles">
17+
</style>
18+
</head>
19+
<body>
20+
<sample-content size="10"></sample-content>
21+
22+
<bottom-button border>Add to Cart</bottom-button>
23+
</body>
24+
</html>

‎demo/color.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6+
7+
<title>bottom-button demo</title>
8+
9+
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10+
11+
<link rel="import" href="../../app-layout/demo/sample-content.html">
12+
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
13+
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
14+
<link rel="import" href="../bottom-button.html">
15+
16+
<style is="custom-style" include="demo-pages-shared-styles">
17+
:root {
18+
--bottom-button-background-color: turquoise;
19+
}
20+
21+
--bottom-button: {
22+
marign: 100px;
23+
}
24+
</style>
25+
</head>
26+
<body>
27+
<sample-content size="10"></sample-content>
28+
29+
<bottom-button>Add to Cart</bottom-button>
30+
</body>
31+
</html>

‎demo/default.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6+
7+
<title>bottom-button demo</title>
8+
9+
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10+
11+
<link rel="import" href="../../app-layout/demo/sample-content.html">
12+
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
13+
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
14+
<link rel="import" href="../bottom-button.html">
15+
16+
<style is="custom-style" include="demo-pages-shared-styles">
17+
</style>
18+
</head>
19+
<body>
20+
<sample-content size="10"></sample-content>
21+
22+
<bottom-button>Add to Cart</bottom-button>
23+
</body>
24+
</html>

‎demo/index.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6+
7+
<title>bottom-button demo</title>
8+
9+
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10+
11+
<link rel="import" href="../../paper-styles/demo-pages.html">
12+
<style>
13+
li {
14+
list-style: none;
15+
padding: .5em 0;
16+
}
17+
</style>
18+
</head>
19+
<body unresolved>
20+
<div class="horizontal-section-container">
21+
<div>
22+
<h4>bottom-button demos</h4>
23+
<ul>
24+
<li><a href="default.html">Default styling</a></li>
25+
<li><a href="border.html">Inner border button</a></li>
26+
<li><a href="color.html">Custom color</a></li>
27+
</ul>
28+
</div>
29+
</div>
30+
</body>
31+
</html>

‎index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6+
7+
<title>bottom-button</title>
8+
9+
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
10+
11+
<link rel="import" href="../iron-component-page/iron-component-page.html">
12+
</head>
13+
<body>
14+
<iron-component-page src="bottom-button.html"></iron-component-page>
15+
</body>
16+
</html>

0 commit comments

Comments
 (0)