From c99de0fcf39e0f20f5406c69ffaa3148768e6941 Mon Sep 17 00:00:00 2001 From: frankiefu Date: Wed, 19 Jun 2013 11:46:10 -0700 Subject: [PATCH 01/23] make menu to support sub-menu; some api docs update --- polymer-ui-menu-item/index.html | 33 ++++++ polymer-ui-menu-item/polymer-ui-menu-item.css | 103 ++++++++++-------- .../polymer-ui-menu-item.html | 33 ++++-- polymer-ui-menu/index.html | 27 +++-- polymer-ui-menu/polymer-ui-menu.css | 2 +- polymer-ui-menu/polymer-ui-menu.html | 41 ++++++- polymer-ui-nav-arrow/index.html | 64 +++++++++++ polymer-ui-nav-arrow/polymer-ui-nav-arrow.css | 26 +++++ .../polymer-ui-nav-arrow.html | 50 ++++----- polymer-ui-sidebar-menu/index.html | 34 +++++- .../polymer-ui-sidebar-menu.css | 7 +- .../polymer-ui-sidebar-menu.html | 24 +++- polymer-ui-tabs/polymer-ui-tabs.html | 2 +- 13 files changed, 335 insertions(+), 111 deletions(-) create mode 100644 polymer-ui-menu-item/index.html create mode 100644 polymer-ui-nav-arrow/index.html create mode 100644 polymer-ui-nav-arrow/polymer-ui-nav-arrow.css diff --git a/polymer-ui-menu-item/index.html b/polymer-ui-menu-item/index.html new file mode 100644 index 0000000..9e6be63 --- /dev/null +++ b/polymer-ui-menu-item/index.html @@ -0,0 +1,33 @@ + + + + + + polymer-ui-menu-item + + + + + + +

polymer-ui-light-theme

+
+ + +
+

polymer-ui-dark-theme

+
+ + +
+ + diff --git a/polymer-ui-menu-item/polymer-ui-menu-item.css b/polymer-ui-menu-item/polymer-ui-menu-item.css index 4ddd00b..f625ca0 100644 --- a/polymer-ui-menu-item/polymer-ui-menu-item.css +++ b/polymer-ui-menu-item/polymer-ui-menu-item.css @@ -7,66 +7,75 @@ license that can be found in the LICENSE file. @host { * { display: block; - box-sizing: border-box; - -moz-box-sizing: border-box; - height: 40px; - line-height: 35px; - padding: 0 10px; - margin: 0 10px; - border: 1px solid transparent; - border-radius: 3px; - -webkit-transition: all 0.1s; - transition: all 0.1s; - white-space: nowrap; - cursor: pointer; - opacity: 0.5; } +} - .polymer-ui-light-theme { - color: #000; - } +/* item */ +#item { + display: block; + box-sizing: border-box; + -moz-box-sizing: border-box; + height: 40px; + line-height: 35px; + padding: 0 10px; + border: 1px solid transparent; + border-radius: 3px; + white-space: nowrap; + cursor: pointer; + opacity: 0.5; +} - .polymer-ui-dark-theme { - color: #b3b3b3; - } - - :hover { - opacity: 0.9; - } - - .polymer-selected { - opacity: 1; - } +#item:hover { + opacity: 0.9; +} - .polymer-ui-dark-theme:hover { - color: rgba(255, 255, 255, 0.9); - } - - .polymer-ui-dark-theme.polymer-selected { - background-color: #000; - border: 1px solid rgba(255, 255, 255, 0.2); - color: rgba(255, 255, 255, 0.9); - } - - .polymer-ui-light-theme:hover { - color: rgba(0, 0, 0, 0.9); - } - - .polymer-ui-light-theme.polymer-selected { - background: #f2f2f2; - border: 1px solid rgba(0, 0, 0, 0.15); - color: rgba(0, 0, 0, 0.9); - } +#item[active] { + opacity: 1; } +#item.polymer-ui-light-theme[active] { + background: #f2f2f2; + border: 1px solid rgba(0, 0, 0, 0.15); +} + +#item.polymer-ui-dark-theme { + color: #b3b3b3; +} + +#item.polymer-ui-dark-theme:hover { + color: rgba(255, 255, 255, 0.9); +} + +#item.polymer-ui-dark-theme[active] { + background-color: #000; + border: 1px solid rgba(255, 255, 255, 0.2); + color: rgba(255, 255, 255, 0.9); +} + +#item[active].no-active-bg { + background-color: transparent; + border: 1px solid transparent; +} + +/* icon and label */ polymer-ui-icon:not([showing]) { display: none !important; } polymer-ui-icon { - margin-right: 20px; + margin-right: 16px; } #label { vertical-align: middle; } + +/* menu */ +#menu { + overflow: hidden; + margin-left: 44px; + height: 0; + /* override @host style on polymer-ui-menu */ + background-image: none !important; + padding: 0 !important; +} diff --git a/polymer-ui-menu-item/polymer-ui-menu-item.html b/polymer-ui-menu-item/polymer-ui-menu-item.html index bae4ff8..a0aea02 100644 --- a/polymer-ui-menu-item/polymer-ui-menu-item.html +++ b/polymer-ui-menu-item/polymer-ui-menu-item.html @@ -7,18 +7,26 @@ /** * @module Polymer UI Elements */ - /** * @class polymer-ui-menu-item */ --> + + - + diff --git a/polymer-ui-menu/index.html b/polymer-ui-menu/index.html index dd86b1f..19ed21d 100644 --- a/polymer-ui-menu/index.html +++ b/polymer-ui-menu/index.html @@ -8,14 +8,9 @@ polymer-ui-menu - - - - - -

polymer-ui-dark-theme

- +

polymer-ui-light-theme

+ -

polymer-ui-light-theme

- +

polymer-ui-dark-theme

+ -

polymer-ui-dark-theme (no icons)

+

no icons

+

sub-menu

+ + + + + + + + + + + diff --git a/polymer-ui-menu/polymer-ui-menu.css b/polymer-ui-menu/polymer-ui-menu.css index 8d7bbcb..b14e8e8 100644 --- a/polymer-ui-menu/polymer-ui-menu.css +++ b/polymer-ui-menu/polymer-ui-menu.css @@ -11,7 +11,7 @@ license that can be found in the LICENSE file. box-sizing: border-box; -moz-box-sizing: border-box; /* size */ - padding: 10px 0; + padding: 10px; font-size: 15px; font-weight: bold; } diff --git a/polymer-ui-menu/polymer-ui-menu.html b/polymer-ui-menu/polymer-ui-menu.html index 8edd9b7..9473d8a 100644 --- a/polymer-ui-menu/polymer-ui-menu.html +++ b/polymer-ui-menu/polymer-ui-menu.html @@ -8,23 +8,51 @@ * @module Polymer UI Elements */ /** - * polymer-ui-menu is a polymer-selector with theme propagation - * * + * polymer-ui-menu is a polymer-selector with theme propagation. It styles to look like + * a menu and should be used in conjunction with polymer-ui-menu-item. + * + * Example: + * + * + * + * + * + * + * + * The event "polymer-select" can be used to listen for selection change. + * + * Example: + * + * + * + * + * + * + * + * ... + * + * selectAction: function(e, detail) { + * if (detail.isSelected) { + * var selectedItem = detail.item; + * ... + * } + * } + * * @class polymer-ui-menu * @extends polymer-selector */ --> - - + diff --git a/polymer-ui-nav-arrow/index.html b/polymer-ui-nav-arrow/index.html new file mode 100644 index 0000000..04a6316 --- /dev/null +++ b/polymer-ui-nav-arrow/index.html @@ -0,0 +1,64 @@ + + + + + + polymer-ui-nav-arrow + + + + + + + +
+ +
Item 1
+
Item 2
+
Item 3
+
Item 4
+
Item 5
+ + +
+ + + + diff --git a/polymer-ui-nav-arrow/polymer-ui-nav-arrow.css b/polymer-ui-nav-arrow/polymer-ui-nav-arrow.css new file mode 100644 index 0000000..b107e97 --- /dev/null +++ b/polymer-ui-nav-arrow/polymer-ui-nav-arrow.css @@ -0,0 +1,26 @@ +/* +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: none; + position: absolute; + top: 0; + right: 0; + width: 0; + height: 0; + margin-top: -8px; + border-top: 9px solid transparent; + border-bottom: 9px solid transparent; + border-right: 9px solid white; + -webkit-transition: -webkit-transform 0.5s; + transition: transform 0.5s; + } + + .show { + display: inline; + } +} \ No newline at end of file diff --git a/polymer-ui-nav-arrow/polymer-ui-nav-arrow.html b/polymer-ui-nav-arrow/polymer-ui-nav-arrow.html index f78f8fe..5342f6d 100644 --- a/polymer-ui-nav-arrow/polymer-ui-nav-arrow.html +++ b/polymer-ui-nav-arrow/polymer-ui-nav-arrow.html @@ -7,38 +7,34 @@ /** * @module Polymer UI Elements */ +/** + * @class polymer-ui-nav-arrow + */ --> - - - + + + diff --git a/polymer-ui-sidebar-menu/index.html b/polymer-ui-sidebar-menu/index.html index afeeae9..1e49ba3 100644 --- a/polymer-ui-sidebar-menu/index.html +++ b/polymer-ui-sidebar-menu/index.html @@ -33,10 +33,36 @@ - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/polymer-ui-sidebar-menu/polymer-ui-sidebar-menu.css b/polymer-ui-sidebar-menu/polymer-ui-sidebar-menu.css index 3fb9786..8c28cf5 100644 --- a/polymer-ui-sidebar-menu/polymer-ui-sidebar-menu.css +++ b/polymer-ui-sidebar-menu/polymer-ui-sidebar-menu.css @@ -23,12 +23,13 @@ polymer-ui-toolbar { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02); } -.title { +.sidebar-title { font-size: 21px; opacity: 0.8; text-shadow: -1px -1px rgba(0, 0, 0, 0.2); } -.menu { - padding: 10px 0; +.sidebar-menu { + padding: 0 10px; + margin: 10px 0; } diff --git a/polymer-ui-sidebar-menu/polymer-ui-sidebar-menu.html b/polymer-ui-sidebar-menu/polymer-ui-sidebar-menu.html index 66b51dd..eab4d7a 100644 --- a/polymer-ui-sidebar-menu/polymer-ui-sidebar-menu.html +++ b/polymer-ui-sidebar-menu/polymer-ui-sidebar-menu.html @@ -14,29 +14,41 @@ * @extends polymer-ui-menu */ --> - - + diff --git a/polymer-ui-tabs/polymer-ui-tabs.html b/polymer-ui-tabs/polymer-ui-tabs.html index 70d7c27..e3569cd 100644 --- a/polymer-ui-tabs/polymer-ui-tabs.html +++ b/polymer-ui-tabs/polymer-ui-tabs.html @@ -8,7 +8,7 @@ * @module Polymer UI Elements */ /** - * polymer-ui-tabs is a g-selector styled to look like a tab menu. + * polymer-ui-tabs is a polymer-selector styled to look like a tab menu. * * Example: * From ef778fca79fbbe64e0db333297c0be5579e79d15 Mon Sep 17 00:00:00 2001 From: "Scott J. Miles" Date: Wed, 19 Jun 2013 12:12:13 -0700 Subject: [PATCH 02/23] update many elements for polymer-element --- .../polymer-ui-icon-button.html | 8 +- polymer-ui-icon/polymer-ui-icon.html | 114 +++++++++--------- .../polymer-ui-menu-item.html | 6 +- polymer-ui-menu/polymer-ui-menu.html | 8 +- .../polymer-ui-nav-arrow.html | 7 +- polymer-ui-ratings/polymer-ui-ratings.html | 10 +- .../polymer-ui-sidebar-menu.html | 22 ++-- polymer-ui-tabs/polymer-ui-tabs.html | 14 +-- .../polymer-ui-theme-aware.html | 29 +++-- .../polymer-ui-toggle-button.html | 6 +- polymer-ui-toolbar/polymer-ui-toolbar.html | 6 +- 11 files changed, 119 insertions(+), 111 deletions(-) diff --git a/polymer-ui-icon-button/polymer-ui-icon-button.html b/polymer-ui-icon-button/polymer-ui-icon-button.html index 0785a1b..512f7e0 100644 --- a/polymer-ui-icon-button/polymer-ui-icon-button.html +++ b/polymer-ui-icon-button/polymer-ui-icon-button.html @@ -20,13 +20,13 @@ - - + - + diff --git a/polymer-ui-icon/polymer-ui-icon.html b/polymer-ui-icon/polymer-ui-icon.html index e37213a..2eea761 100644 --- a/polymer-ui-icon/polymer-ui-icon.html +++ b/polymer-ui-icon/polymer-ui-icon.html @@ -26,65 +26,67 @@ --> - + - + diff --git a/polymer-ui-menu-item/polymer-ui-menu-item.html b/polymer-ui-menu-item/polymer-ui-menu-item.html index bae4ff8..cbf0e67 100644 --- a/polymer-ui-menu-item/polymer-ui-menu-item.html +++ b/polymer-ui-menu-item/polymer-ui-menu-item.html @@ -15,13 +15,13 @@ - + - + diff --git a/polymer-ui-menu/polymer-ui-menu.html b/polymer-ui-menu/polymer-ui-menu.html index 8edd9b7..7b0d307 100644 --- a/polymer-ui-menu/polymer-ui-menu.html +++ b/polymer-ui-menu/polymer-ui-menu.html @@ -18,22 +18,22 @@ - + - + diff --git a/polymer-ui-nav-arrow/polymer-ui-nav-arrow.html b/polymer-ui-nav-arrow/polymer-ui-nav-arrow.html index f78f8fe..90189c4 100644 --- a/polymer-ui-nav-arrow/polymer-ui-nav-arrow.html +++ b/polymer-ui-nav-arrow/polymer-ui-nav-arrow.html @@ -8,8 +8,7 @@ * @module Polymer UI Elements */ --> - - + - + diff --git a/polymer-ui-ratings/polymer-ui-ratings.html b/polymer-ui-ratings/polymer-ui-ratings.html index d030eff..a82c3bb 100644 --- a/polymer-ui-ratings/polymer-ui-ratings.html +++ b/polymer-ui-ratings/polymer-ui-ratings.html @@ -3,10 +3,14 @@ Use of this source code is governed by a BSD-style license that can be found in the LICENSE file. --> + + + - + - + diff --git a/polymer-ui-sidebar-menu/polymer-ui-sidebar-menu.html b/polymer-ui-sidebar-menu/polymer-ui-sidebar-menu.html index 66b51dd..2564985 100644 --- a/polymer-ui-sidebar-menu/polymer-ui-sidebar-menu.html +++ b/polymer-ui-sidebar-menu/polymer-ui-sidebar-menu.html @@ -3,16 +3,11 @@ Use of this source code is governed by a BSD-style license that can be found in the LICENSE file. --> + @@ -21,7 +16,16 @@ - + + + - + diff --git a/polymer-ui-tabs/polymer-ui-tabs.html b/polymer-ui-tabs/polymer-ui-tabs.html index 70d7c27..c6d028f 100644 --- a/polymer-ui-tabs/polymer-ui-tabs.html +++ b/polymer-ui-tabs/polymer-ui-tabs.html @@ -7,6 +7,11 @@ /** * @module Polymer UI Elements */ +--> + + + + - - - + - - + diff --git a/polymer-ui-theme-aware/polymer-ui-theme-aware.html b/polymer-ui-theme-aware/polymer-ui-theme-aware.html index 941c33a..91f4a47 100644 --- a/polymer-ui-theme-aware/polymer-ui-theme-aware.html +++ b/polymer-ui-theme-aware/polymer-ui-theme-aware.html @@ -3,29 +3,28 @@ Use of this source code is governed by a BSD-style license that can be found in the LICENSE file. --> - + - + diff --git a/polymer-ui-toggle-button/polymer-ui-toggle-button.html b/polymer-ui-toggle-button/polymer-ui-toggle-button.html index 74fb85a..8cd25ce 100644 --- a/polymer-ui-toggle-button/polymer-ui-toggle-button.html +++ b/polymer-ui-toggle-button/polymer-ui-toggle-button.html @@ -18,7 +18,7 @@ * @class polymer-ui-toggle-button */ --> - - + diff --git a/polymer-ui-toolbar/polymer-ui-toolbar.html b/polymer-ui-toolbar/polymer-ui-toolbar.html index 1af8526..074db34 100644 --- a/polymer-ui-toolbar/polymer-ui-toolbar.html +++ b/polymer-ui-toolbar/polymer-ui-toolbar.html @@ -26,17 +26,17 @@ - + - + From 05705319e3aa34cd845c5b5f210de04e87634779 Mon Sep 17 00:00:00 2001 From: "Scott J. Miles" Date: Wed, 19 Jun 2013 14:03:59 -0700 Subject: [PATCH 03/23] move tags inside of