CSS reference - Bifrost

Bottom bar

`.bf-bottom-bar`

Fixed position bottom of viewport (will float on top of other content)
Responsive vertical padding equal to .bf-page-padding (remove all padding with .bf-bottom-bar-nopadding)
Automatically makes space for sidebar/collapsed sidebar/no sidebar (including transition)
Height will adjust to its content

Main content overlap

Since the BottomBar will float on top of other content, you need to make sure to make vertical space for it at the bottom of your content, usually a padding-bottom: [your BottomBar height] on your main content will do the trick.

<div class="bf-bottom-bar">
  <button class="bf-button">A button</button>
</div>
<div class="bf-bottom-bar">
  <button class="bf-button">A button</button>
</div>

`.bf-bottom-bar-nopadding`

Removes the padding

<div class="bf-bottom-bar bf-bottom-bar-nopadding">
  <button class="bf-button">A button</button>
</div>
<div class="bf-bottom-bar bf-bottom-bar-nopadding">
  <button class="bf-button">A button</button>
</div>

Combine with `.bf-inline`

You can use .bf-inline to get inline spacing between items, and .bf-inline-space to add margin-left: auto on an item (pushing it to the right).

Since .bf-inline uses flexbox, you can center its items vertically with align-items: center. See inline css docs for more examples.

<div class="bf-bottom-bar bf-inline" style="align-items: center">
  <button class="bf-button">Cancel</button>
  <span class="bf-inline-space">Some text</span>
  <button class="bf-button bf-button-filled">Done</button>
</div>
<div class="bf-bottom-bar bf-inline" style="align-items: center">
  <button class="bf-button">Cancel</button>
  <span class="bf-inline-space">Some text</span>
  <button class="bf-button bf-button-filled">Done</button>
</div>

Some text

Sandbox

<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css" /><link rel="stylesheet" href="styles.css" />

<div class="bf-bottom-bar bf-inline" style="align-items: center">
  <button class="bf-button">Cancel</button>
  <span class="bf-inline-space">Some text</span>
  <button class="bf-button bf-button-filled">Done</button>
</div>

Open Sandbox

.bf-bottom-bar

.bf-bottom-bar-nopadding

Combine with .bf-inline

Sandbox

`.bf-bottom-bar`

`.bf-bottom-bar-nopadding`

Combine with `.bf-inline`