**[ This description is mirrored from README.md at [github.com/IswPolymerElements/isw-toolbar](https://github.com//IswPolymerElements/isw-toolbar/blob/1.0.8/README.md) on 2019-05-22 ]** # \ Material Design Polymer 2.0 Toolbar. Since paper-toolbar is deprecated, and making an app-toolbar MD takes some styling - DRY. ```html ISW Toolbar Demo ``` ### Responsive The element uses the `isw-responsive-behavior`, so its appearance can be controlled by setting the `device` and `orientation` attributes... ```html ISW Toolbar Demo ``` ... or get responsive by combining with `isw-responsive` ```html ISW Toolbar Demo ``` ### Styling The following custom properties are available for styling: Custom property | Default ----------------|---------- `--isw-toolbar-background` | --primary-color `--isw-toolbar-font-color` | --dark-theme-text-color `--isw-toolbar-button-icon-color` | --dark-theme-text-color `--isw-toolbar-fab-icon-color` | --dark-theme-text-color Available mixins: * `--isw-toolbar-row-mobile` * `--isw-toolbar-row-tablet` * `--isw-toolbar-row-desktop` Default styling via paper-styles properties: ```css isw-toolbar { --primary-color: var(--paper-blue-500); --accent-color: var(--paper-cyan-500); } ``` Custom styling: ```css isw-toolbar { --isw-toolbar-background: var(--paper-blue-500); --isw-toolbar-font-color: var(--dark-theme-text-color); --isw-toolbar-button-icon-color: rgba( 0, 0, 0, 0.54 ); --isw-toolbar-fab-icon-color: var(--dark-theme-text-color); --paper-fab-background: var(--paper-cyan-500); } ``` ### Elements wrapped with a-tag Elements with a tags should be properly styled by default. If the fab is mini and wrapped in an a tag, the a tag also needs an mini attribute for correct positioning. ```html ```