diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..268eba2 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +/docs + +/node_modules diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..f30fbaa --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "tools"] + path = tools + url = https://github.com/Polymer/tools.git diff --git a/assets/action-icons.pdn b/assets/action-icons.pdn index 2199846..22f0c9d 100644 Binary files a/assets/action-icons.pdn and b/assets/action-icons.pdn differ diff --git a/assets/action-icons.png b/assets/action-icons.png index 174fc92..64d08d0 100644 Binary files a/assets/action-icons.png and b/assets/action-icons.png differ diff --git a/gruntfile.js b/gruntfile.js new file mode 100644 index 0000000..16c32c2 --- /dev/null +++ b/gruntfile.js @@ -0,0 +1,35 @@ +/* + * 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.exports = function(grunt) { + grunt.initConfig({ + yuidoc: { + compile: { + name: '<%= pkg.name %>', + description: '<%= pkg.description %>', + version: '<%= pkg.version %>', + url: '<%= pkg.homepage %>', + options: { + exclude: 'third_party', + extension: '.js,.html', + paths: '.', + outdir: 'docs', + linkNatives: 'true', + tabtospace: 2, + themedir: 'tools/doc/themes/footstrap' + } + } + }, + pkg: grunt.file.readJSON('package.json') + }); + + // plugins + grunt.loadNpmTasks('grunt-contrib-yuidoc'); + + // tasks + grunt.registerTask('default', ['yuidoc']); + grunt.registerTask('docs', ['yuidoc']); +}; + diff --git a/manifest.xml b/manifest.xml new file mode 100644 index 0000000..116cb90 --- /dev/null +++ b/manifest.xml @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..3a3ba27 --- /dev/null +++ b/package.json @@ -0,0 +1,8 @@ +{ + "name": "PolymerUIElements", + "version": "0.0.1", + "devDependencies": { + "grunt": "*", + "grunt-contrib-yuidoc": "*" + } +} diff --git a/polymer-ui-accordion/polymer-ui-accordion.html b/polymer-ui-accordion/polymer-ui-accordion.html index 6f38306..28221dd 100644 --- a/polymer-ui-accordion/polymer-ui-accordion.html +++ b/polymer-ui-accordion/polymer-ui-accordion.html @@ -41,4 +41,7 @@ + diff --git a/polymer-ui-collapsible/polymer-ui-collapsible.html b/polymer-ui-collapsible/polymer-ui-collapsible.html index d2cdf6f..02d618c 100644 --- a/polymer-ui-collapsible/polymer-ui-collapsible.html +++ b/polymer-ui-collapsible/polymer-ui-collapsible.html @@ -27,21 +27,30 @@ --> - + diff --git a/polymer-ui-field/index.html b/polymer-ui-field/index.html new file mode 100644 index 0000000..4e9ff2a --- /dev/null +++ b/polymer-ui-field/index.html @@ -0,0 +1,22 @@ + + + + + Polymer UI Field + + + + + + + + + + + + diff --git a/polymer-ui-field/polymer-ui-field.html b/polymer-ui-field/polymer-ui-field.html new file mode 100644 index 0000000..1af28a9 --- /dev/null +++ b/polymer-ui-field/polymer-ui-field.html @@ -0,0 +1,33 @@ + + + + diff --git a/polymer-ui-icon-button/polymer-ui-icon-button.css b/polymer-ui-icon-button/polymer-ui-icon-button.css index 8c32c02..88e91b5 100644 --- a/polymer-ui-icon-button/polymer-ui-icon-button.css +++ b/polymer-ui-icon-button/polymer-ui-icon-button.css @@ -16,15 +16,15 @@ license that can be found in the LICENSE file. background: url(btn_light.png) top left no-repeat; background-size: cover; } - + *:hover { background-position: 0 -44px; } - + *.selected { background-position: 0 -88px; } - + *:active, *.selected:active { background-position: 0 -132px; } diff --git a/polymer-ui-icon-button/polymer-ui-icon-button.html b/polymer-ui-icon-button/polymer-ui-icon-button.html index d209fff..0ebbee2 100644 --- a/polymer-ui-icon-button/polymer-ui-icon-button.html +++ b/polymer-ui-icon-button/polymer-ui-icon-button.html @@ -30,7 +30,7 @@ diff --git a/polymer-ui-icon/polymer-ui-icon.css b/polymer-ui-icon/polymer-ui-icon.css index 351f625..c0cae6a 100644 --- a/polymer-ui-icon/polymer-ui-icon.css +++ b/polymer-ui-icon/polymer-ui-icon.css @@ -20,6 +20,6 @@ license that can be found in the LICENSE file. } .polymer-ui-icons { - background-image: url(../assets/action-icons.png); + background-image: url(action-icons.png); } } \ No newline at end of file diff --git a/polymer-ui-icon/polymer-ui-icon.html b/polymer-ui-icon/polymer-ui-icon.html index b143297..7d7684c 100644 --- a/polymer-ui-icon/polymer-ui-icon.html +++ b/polymer-ui-icon/polymer-ui-icon.html @@ -36,9 +36,58 @@ diff --git a/polymer-ui-menu-button/index.html b/polymer-ui-menu-button/index.html new file mode 100644 index 0000000..f4426a7 --- /dev/null +++ b/polymer-ui-menu-button/index.html @@ -0,0 +1,52 @@ + + + + + + polymer-ui-menu-button + + + + + + + + +
+ + +
Toolbar: polymer-ui-light-theme
+ + + + + + + + + + + + +









+ + + + + +









+
+ + diff --git a/polymer-ui-menu-button/polymer-ui-menu-button.css b/polymer-ui-menu-button/polymer-ui-menu-button.css new file mode 100644 index 0000000..d3886ab --- /dev/null +++ b/polymer-ui-menu-button/polymer-ui-menu-button.css @@ -0,0 +1,65 @@ +@host { + :scope { + position: relative; + } + .fullwidth { + position: static; + } +} + +#menuOverlay { + box-sizing: border-box; + -moz-box-sizing: border-box; + background: white; + border: 1px solid rgba(0, 0, 0, 0.15); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + margin: 7px 0 0 7px; +} + +#menuOverlay[valign=right] { + position: absolute !important; + right: 10px; +} + +@media screen and (max-width: 800px) { + #menuOverlay, + #menuOverlay[valign=right] { + left: 0; + width: 100%; + -webkit-transform: none; + transform: none; + margin: 7px 0 0 0; + } +} + +#button { + position: relative; +} + +#arrow { + position: absolute; + bottom: -8px; +} + +.arrow { + height: 1px; + width: 0; + margin: -17px 4px 0; + border-color: transparent transparent #cfcfcf transparent; + border-style: solid; + border-width: 8px; +} + +.arrow.right { + float: right; + margin: -17px 4px 0; +} + +.arrow.center { + margin: -17px auto 0; +} + +.arrow-inner { + border-bottom-color: white; + margin-top: -16px; +} diff --git a/polymer-ui-menu-button/polymer-ui-menu-button.html b/polymer-ui-menu-button/polymer-ui-menu-button.html new file mode 100644 index 0000000..850cf0d --- /dev/null +++ b/polymer-ui-menu-button/polymer-ui-menu-button.html @@ -0,0 +1,61 @@ + + + + + + + + + + + diff --git a/polymer-ui-menu-item/index.html b/polymer-ui-menu-item/index.html index 9e6be63..0c4f032 100644 --- a/polymer-ui-menu-item/index.html +++ b/polymer-ui-menu-item/index.html @@ -9,7 +9,7 @@ polymer-ui-menu-item - + @@ -39,15 +40,15 @@

no icons

sub-menu

- + - - + + - + diff --git a/polymer-ui-menu/polymer-ui-menu.css b/polymer-ui-menu/polymer-ui-menu.css index b14e8e8..9bd1b2e 100644 --- a/polymer-ui-menu/polymer-ui-menu.css +++ b/polymer-ui-menu/polymer-ui-menu.css @@ -11,8 +11,7 @@ license that can be found in the LICENSE file. box-sizing: border-box; -moz-box-sizing: border-box; /* size */ - padding: 10px; - font-size: 15px; + padding: 0.4em; font-weight: bold; } diff --git a/polymer-ui-nav-arrow/polymer-ui-nav-arrow.css b/polymer-ui-nav-arrow/polymer-ui-nav-arrow.css index b107e97..8d62d9a 100644 --- a/polymer-ui-nav-arrow/polymer-ui-nav-arrow.css +++ b/polymer-ui-nav-arrow/polymer-ui-nav-arrow.css @@ -17,7 +17,7 @@ license that can be found in the LICENSE file. border-bottom: 9px solid transparent; border-right: 9px solid white; -webkit-transition: -webkit-transform 0.5s; - transition: transform 0.5s; + transition: transform 0.33s; } .show { diff --git a/polymer-ui-nav-arrow/polymer-ui-nav-arrow.html b/polymer-ui-nav-arrow/polymer-ui-nav-arrow.html index a8cd901..49f0795 100644 --- a/polymer-ui-nav-arrow/polymer-ui-nav-arrow.html +++ b/polymer-ui-nav-arrow/polymer-ui-nav-arrow.html @@ -11,22 +11,42 @@ * @class polymer-ui-nav-arrow */ --> - + + + + + + + + ( open styling: + , + + + ) +
+ +

Dialog

+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla sapien sed enim sollicitudin laoreet. Suspendisse suscipit, metus ac volutpat sodales, libero magna semper lacus, molestie fringilla massa orci ut arcu. Nullam sodales urna sit amet odio vehicula mattis.


+
Ut aliquam vulputate congue. Vestibulum pretium pretium nulla quis sollicitudin. Praesent lacinia congue erat nec mattis. Fusce commodo lacus est. Duis turpis eros, ultrices sed aliquet non, blandit egestas velit. Integer a augue nec lorem tristique hendrerit. Curabitur imperdiet risus id enim bibendum vestibulum. Integer id magna at arcu faucibus fermentum vel a augue. Sed fringilla venenatis dolor, in blandit magna molestie luctus. Vestibulum dignissim posuere ultrices. Aenean urna nisl, tincidunt vitae iaculis ut, pharetra nec eros.


+
+
+ I agree with this wholeheartedly. + + Thank you. + +


+ + + +

+ + + + +
+

Dialog 2

+ I'm dizzy. +
+

+ + + + + + + +

I'm a <dialog>!

+ It works!
+ + + + + + +

A native <dialog>

+ + + + + diff --git a/polymer-ui-overlay/polymer-ui-overlay-dialog.html b/polymer-ui-overlay/polymer-ui-overlay-dialog.html new file mode 100644 index 0000000..ac091b8 --- /dev/null +++ b/polymer-ui-overlay/polymer-ui-overlay-dialog.html @@ -0,0 +1,48 @@ + + + + + + diff --git a/polymer-ui-overlay/polymer-ui-overlay.html b/polymer-ui-overlay/polymer-ui-overlay.html new file mode 100644 index 0000000..267b46e --- /dev/null +++ b/polymer-ui-overlay/polymer-ui-overlay.html @@ -0,0 +1,18 @@ + + + + + + diff --git a/polymer-ui-ratings/polymer-ui-ratings.html b/polymer-ui-ratings/polymer-ui-ratings.html index b1839fa..39e4ecb 100644 --- a/polymer-ui-ratings/polymer-ui-ratings.html +++ b/polymer-ui-ratings/polymer-ui-ratings.html @@ -12,24 +12,24 @@ + + + diff --git a/polymer-ui-sidebar/index.html b/polymer-ui-sidebar/index.html new file mode 100644 index 0000000..92f0f66 --- /dev/null +++ b/polymer-ui-sidebar/index.html @@ -0,0 +1,34 @@ + + + + + + polymer-ui-sidebar + + + + + + + + some content... + + + diff --git a/polymer-ui-sidebar/polymer-ui-sidebar-header.css b/polymer-ui-sidebar/polymer-ui-sidebar-header.css new file mode 100644 index 0000000..161e84b --- /dev/null +++ b/polymer-ui-sidebar/polymer-ui-sidebar-header.css @@ -0,0 +1,25 @@ +/* +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. +*/ + +@host { + * { + display: block; + } +} + +polymer-ui-toolbar { + /* override @host styles on polymer-ui-toolbar */ + padding: 0 12px !important; + border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important; + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02); +} + +.sidebar-title { + font-size: 21px; + font-weight: bold; + opacity: 0.8; + text-shadow: -1px -1px rgba(0, 0, 0, 0.2); +} diff --git a/polymer-ui-sidebar/polymer-ui-sidebar-header.html b/polymer-ui-sidebar/polymer-ui-sidebar-header.html new file mode 100644 index 0000000..f26c3a6 --- /dev/null +++ b/polymer-ui-sidebar/polymer-ui-sidebar-header.html @@ -0,0 +1,29 @@ + + + + + + + + diff --git a/polymer-ui-sidebar/polymer-ui-sidebar.css b/polymer-ui-sidebar/polymer-ui-sidebar.css new file mode 100644 index 0000000..6df3e16 --- /dev/null +++ b/polymer-ui-sidebar/polymer-ui-sidebar.css @@ -0,0 +1,30 @@ +/* +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. +*/ + +@host { + * { + box-shadow: inset -8px 0px 8px -4px rgba(0, 0, 0, 0.4); + } + + .polymer-ui-light-theme { + box-shadow: inset -8px 0px 8px -4px rgba(0, 0, 0, 0.15); + color: #333333; + } + + .polymer-ui-dark-theme { + background: -webkit-linear-gradient(-60deg, #3d3d3d, #353535); + background: -moz-linear-gradient(-60deg, #3d3d3d, #353535); + background: -ms-linear-gradient(-60deg, #3d3d3d, #353535); + color: #ededed; + } +} + +/*@polyfill @host :not(polymer-ui-submenu-item) > polymer-ui-menu */ +content::-webkit-distributed(polymer-ui-menu) { + background: none !important; + padding: 0 10px; + margin: 10px 0; +} \ No newline at end of file diff --git a/polymer-ui-sidebar/polymer-ui-sidebar.html b/polymer-ui-sidebar/polymer-ui-sidebar.html new file mode 100644 index 0000000..57646b1 --- /dev/null +++ b/polymer-ui-sidebar/polymer-ui-sidebar.html @@ -0,0 +1,32 @@ + + + + + + + + + + diff --git a/polymer-ui-splitter/polymer-ui-splitter.html b/polymer-ui-splitter/polymer-ui-splitter.html index 34dbda6..77db0f1 100644 --- a/polymer-ui-splitter/polymer-ui-splitter.html +++ b/polymer-ui-splitter/polymer-ui-splitter.html @@ -57,7 +57,6 @@ */ locked: false, ready: function() { - this.setAttribute('touch-action', 'none'); this.directionChanged(); }, directionChanged: function() { diff --git a/polymer-ui-submenu-item/index.html b/polymer-ui-submenu-item/index.html new file mode 100644 index 0000000..fb980af --- /dev/null +++ b/polymer-ui-submenu-item/index.html @@ -0,0 +1,38 @@ + + + + + + polymer-ui-submenu-item + + + + + + + +

polymer-ui-light-theme

+
+ + + + +
+

polymer-ui-dark-theme

+
+ + + + +
+ + diff --git a/polymer-ui-submenu-item/polymer-ui-submenu-item.css b/polymer-ui-submenu-item/polymer-ui-submenu-item.css new file mode 100644 index 0000000..9bb3896 --- /dev/null +++ b/polymer-ui-submenu-item/polymer-ui-submenu-item.css @@ -0,0 +1,20 @@ +/* +Copyright 2013 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: block; + } +} + +/* menu */ +#menu { + margin-left: 44px; + height: 0; + /* override @host style on polymer-ui-menu */ + background-image: none !important; + padding: 0 !important; +} diff --git a/polymer-ui-submenu-item/polymer-ui-submenu-item.html b/polymer-ui-submenu-item/polymer-ui-submenu-item.html new file mode 100644 index 0000000..42e9e83 --- /dev/null +++ b/polymer-ui-submenu-item/polymer-ui-submenu-item.html @@ -0,0 +1,79 @@ + + + + + + + + + + + diff --git a/polymer-ui-tabs/polymer-ui-tabs.css b/polymer-ui-tabs/polymer-ui-tabs.css new file mode 100644 index 0000000..8a41eca --- /dev/null +++ b/polymer-ui-tabs/polymer-ui-tabs.css @@ -0,0 +1,30 @@ +/* +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. +*/ + +@host { + * { + height: 60px; + white-space: nowrap; + } +} + +/*@polyfill @host > * */ +::-webkit-distributed(> *) { + min-width: 60px; + height: 60px; + line-height: 60px; + text-align: center; + padding: 0 8px; + cursor: pointer; + font-size: 14px; + color: #999; +} + +/*@polyfill @host > *.polymer-selected */ +::-webkit-distributed(> *.polymer-selected) { + background: #75d0df; + color: #fff; +} \ No newline at end of file diff --git a/polymer-ui-tabs/polymer-ui-tabs.html b/polymer-ui-tabs/polymer-ui-tabs.html index dfc9431..46fffe4 100644 --- a/polymer-ui-tabs/polymer-ui-tabs.html +++ b/polymer-ui-tabs/polymer-ui-tabs.html @@ -28,38 +28,15 @@ * @extends polymer-selector */ --> + + + diff --git a/polymer-ui-toggle-button/index.html b/polymer-ui-toggle-button/index.html index 648384f..b75a5cf 100644 --- a/polymer-ui-toggle-button/index.html +++ b/polymer-ui-toggle-button/index.html @@ -20,6 +20,10 @@

- + +

+ +

+ diff --git a/polymer-ui-toggle-button/polymer-ui-toggle-button.css b/polymer-ui-toggle-button/polymer-ui-toggle-button.css index d25e44d..9ff03ac 100644 --- a/polymer-ui-toggle-button/polymer-ui-toggle-button.css +++ b/polymer-ui-toggle-button/polymer-ui-toggle-button.css @@ -7,11 +7,11 @@ * { display: inline-block; position: relative; - width: 70px; - height: 30px; + width: 60px; + height: 24px; overflow: hidden; border: 1px solid #b6b6b6; - border-radius: 3px; + border-radius: 2px; box-shadow: inset 0px 0px 1px 0 rgba(0,0,0,0.1); -webkit-user-select: none; -moz-user-select: none; @@ -21,14 +21,14 @@ } *.on { - border: 1px solid #4584f2; + border: 1px solid #5ac7d8; } } .toggle { position: absolute; - left: -42px; - width: 112px; + left: -36px; + width: 96px; height: 100%; overflow: hidden; white-space: nowrap; @@ -52,7 +52,7 @@ .on-label, .off-label { width: 50%; height: 100%; - line-height: 30px; + line-height: 24px; box-sizing: border-box; -moz-box-sizing: border-box; text-align: center; @@ -62,7 +62,7 @@ .on-label { padding-right: 14px; - background-color: #488afd; + background-color: #75d0df; color: white; } @@ -74,23 +74,9 @@ .thumb { position: absolute; - left: 42px; - width: 28px; + left: 36px; + width: 24px; height: 100%; - border-radius: 2px; + border-radius: 1px; background-color: white; } - -.thumb::after { - content: ""; - position: absolute; - display: block; - top: 10px; - left: 11px; - height: 10px; - width: 8px; - background-image: -webkit-linear-gradient(left, #d4d3d3 40%, transparent 40%); - background-image: -moz-linear-gradient(left, #d4d3d3 40%, transparent 40%); - background-image: -ms-linear-gradient(left, #d4d3d3 40%, transparent 40%); - background-size: 4px; -} diff --git a/polymer-ui-toggle-button/polymer-ui-toggle-button.html b/polymer-ui-toggle-button/polymer-ui-toggle-button.html index 98fd958..5ef46a2 100644 --- a/polymer-ui-toggle-button/polymer-ui-toggle-button.html +++ b/polymer-ui-toggle-button/polymer-ui-toggle-button.html @@ -18,14 +18,14 @@ * @class polymer-ui-toggle-button */ --> - diff --git a/tools b/tools new file mode 160000 index 0000000..d4194fe --- /dev/null +++ b/tools @@ -0,0 +1 @@ +Subproject commit d4194fed0aa30e89fd3ba405f64ade3e45bd6d47