apps/dev/src/devapp.component.scss
@import '../../../libs/barista-components/style/font-styles.scss';

$top-bar-navigation-height: 44px;

:host {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

::ng-deep .dev-app-zone-counter {
  display: block;
  position: fixed;
  bottom: 0;
  right: 0;
  background-color: #7dc540;
  color: #fff;
  padding: 2px 8px;
  border-top-left-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 3px;
  font-family: 'BerninaSansWeb', 'OpenSans', sans-serif;
}

::ng-deep .dev-app-zone-counter-firing {
  background: #dc172a;
}

.nav {
  top: 0;
  width: 100%;
  right: 0;
  z-index: 1;
}

.theme-selector {
  display: block;
  float: right;
  margin: 6px 10px;
}

.content-wrapper {
  display: flex;
  flex-grow: 1;

  .searchform {
    padding: 8px;
  }
}

.main {
  flex: 1 1 auto;
  padding: 20px;
}

.dt-theme-dark.main {
  background-color: #242424;
}

.sidenav-title {
  display: inline-flex;
  line-height: 44px;
  font-size: 112%;
}

.sidenav-title-image {
  height: 24px;
  width: 24px;
  fill: #ffffff;
  line-height: 56px;
  margin-right: 10px;
}

.top-bar-button {
  width: 44px;
  height: 44px;
  fill: #ffffff;
  background: #191919;
  border: 0;
  outline: none;
  cursor: pointer;

  &:hover {
    background: #353535;
  }
}
