how to add content to the paper-toolbar so it appears right at the top?

Question

I'm trying to modify default paper toolbar behavior namely making content appear right at the top of the bar. Poking at chrome developer tool, I found that if I remove height and padding from:

.toolbar-tools.paper-toolbar {
  position: relative;
  height: 64px;
  padding: 0 16px;
  pointer-events: none;
}

My top and bottom sections of the toolbar appear without any gaps from top(height), bottom(height) and left(padding) sides:

    <paper-toolbar>
     <div class="top">
      <p>Top text</p>
     </div>
     <div class="bottom">
      <p>Bottom text</p>
     </div>
    </paper-toolbar>

I tried adding css rules to .top , .bottom and .toolbar-tools but that doesn't seem to make any effect and original rules stand. I was wondering if there's any way of removing margins for .top and .bottom sections of the paper-toolbar via:

    paper-toolbar {
      --paper-toolbar-background: black; 
      --paper-toolbar-color: red;
      --paper-toolbar: {
        font-size: 15px;
        height: 200px;
      }; 
    }

Or am I better off just creating custom toolbar myself?

edit: here's the link to the code https://github.com/T0MASD/webcomponents-playground/blob/master/app/elements/ui-navbar/ui-navbar.html

Answer 1

paper-toolbar has one inner container (#topBar) by default and two others (#middleBar & #bottomBar) when it is set as tall.

Adding a top and bottom classes only work when the toolbar is set as tall.

The inside content is moved to the middle by flexbox, so to move it to the top change the align-items style to flex-start.

Example Style:

<style is="custom-style">
  paper-toolbar ::shadow #topBar {
      align-items: flex-start;
  }
</style>

There is not a mixin for the #topBar so we have to select it with the ::shadow selector. You can do the same for the #bottomBar also.

Here's a working example