This repository has been archived by the owner on Mar 13, 2018. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
polymer-ui-sidebar-menu (formerly known as ribbon)
- Loading branch information
Showing
4 changed files
with
173 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
|
|
||
| <!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>polymer-ui-sidebar-menu</title> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
| <!-- load toolkit --> | ||
| <script src="../../polymer/polymer.js"></script> | ||
| <!-- import elements--> | ||
| <link rel="import" href="polymer-ui-sidebar-menu.html"> | ||
| <link rel="import" href="../polymer-ui-menu-item/polymer-ui-menu-item.html"> | ||
| <!-- --> | ||
| <link rel="stylesheet" href="../basic.css"> | ||
| <style> | ||
| html, body { | ||
| height: 100%; | ||
| } | ||
|
|
||
| body { | ||
| margin: 0; | ||
| } | ||
|
|
||
| polymer-ui-sidebar-menu { | ||
| width: 240px; | ||
| height: 100%; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body class="polymer-ui-body-text" theme="polymer-ui-dark-theme"> | ||
| <polymer-ui-sidebar-menu selected="0" label="Polymer"> | ||
| <polymer-ui-menu-item icon="settings">Home</polymer-ui-menu-item> | ||
| <polymer-ui-menu-item icon="settings">Explore</polymer-ui-menu-item> | ||
| <polymer-ui-menu-item icon="settings">Favorites</polymer-ui-menu-item> | ||
| </polymer-ui-sidebar-menu> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| <!-- | ||
| 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 | ||
| */ | ||
| --> | ||
|
|
||
| <element name="polymer-ui-nav-arrow" attributes="target"> | ||
| <template> | ||
| <style> | ||
| @host { | ||
| * { | ||
| position: absolute; | ||
| margin-top: -8px; | ||
| top: -100px; | ||
| right: 0; | ||
| width: 0; | ||
| height: 0; | ||
| border-top: 9px solid transparent; | ||
| border-bottom: 9px solid transparent; | ||
| border-right: 9px solid white; | ||
| -webkit-transition: top 0.5s; | ||
| transition: top 0.5s; | ||
| } | ||
| } | ||
| </style> | ||
| </template> | ||
| <script> | ||
| Polymer.register(this, { | ||
| targetChanged: function() { | ||
| var t = this.target | ||
| if (t) { | ||
| this.style.top = t.offsetTop + t.offsetHeight/2 + 'px'; | ||
| } | ||
| } | ||
| }); | ||
| </script> | ||
| </element> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| /* | ||
| 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 { | ||
| * { | ||
| position: relative; | ||
| box-shadow: inset -8px 0px 8px -4px rgba(0, 0, 0, 0.4); | ||
| padding: 0; | ||
| } | ||
| } | ||
|
|
||
| polymer-ui-toolbar { | ||
| /* override @host styles on polymer-ui-toolbar */ | ||
| padding: 0 20px !important; | ||
| border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important; | ||
| box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02); | ||
| } | ||
|
|
||
| .title { | ||
| font-size: 21px; | ||
| } | ||
|
|
||
| .menu { | ||
| padding: 10px 0; | ||
| } | ||
|
|
||
| /* #arrow { | ||
| position: absolute; | ||
| margin-top: -8px; | ||
| top: -100px; | ||
| right: 0; | ||
| width: 0; | ||
| height: 0; | ||
| border-top: 9px solid transparent; | ||
| border-bottom: 9px solid transparent; | ||
| border-right: 9px solid white; | ||
| -webkit-transition: top 0.5s; | ||
| transition: top 0.5s; | ||
| } | ||
| */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| <!-- | ||
| 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 | ||
| */ | ||
| /** | ||
| * polymer-ui-sidebar-menu is a polymer-menu on the sidebar | ||
| * * | ||
| * @class polymer-ui-sidebar-menu | ||
| * @extends polymer-selector | ||
| */ | ||
| --> | ||
|
|
||
| <link rel="import" href="../polymer-ui-theme-aware/polymer-ui-theme-aware.html"> | ||
| <link rel="import" href="../polymer-ui-menu/polymer-ui-menu.html"> | ||
| <link rel="import" href="../polymer-ui-toolbar/polymer-ui-toolbar.html"> | ||
| <link rel="import" href="../../polymer-elements/polymer-layout/polymer-flex-layout.html"> | ||
| <link rel="import" href="polymer-ui-nav-arrow.html"> | ||
|
|
||
| <element name="polymer-ui-sidebar-menu" extends="polymer-ui-menu" attributes="theme label"> | ||
| <link rel="stylesheet" href="polymer-ui-sidebar-menu.css"> | ||
| <template> | ||
| <polymer-flex-layout vertical></polymer-flex-layout> | ||
| <polymer-ui-toolbar theme="sidebar"> | ||
| <content select="[logo]"></content> | ||
| <div class="title">{{label}}</div> | ||
| </polymer-ui-toolbar> | ||
| <div class="menu"> | ||
| <shadow></shadow> | ||
| </div> | ||
| <polymer-ui-nav-arrow id="navArrow"></polymer-ui-nav-arrow> | ||
| </template> | ||
| <script> | ||
| Polymer.register(this, { | ||
| valueattr: 'label', | ||
| selectionChanged: function() { | ||
| this.super(); | ||
| this.$.navArrow.target = this.selection; | ||
| } | ||
| }); | ||
| </script> | ||
| </element> |