public/styles/layout/_toolbar.scss

// -----------------------------------------------------------------------------
// This file contains styles for the top toolbar
// -----------------------------------------------------------------------------
$toolbarHeight: 50px;

.toolbar {
  width: 100%;
  height: $toolbarHeight;
  background-color: $cWhite;
  display: flex;
  border-bottom: 1px solid $greyBorderColor;
  justify-content: space-between;

  box-shadow: 0px 1px 2px $color200Grey;

  &--embedded {
    background-color: $color200Grey;
    width: 100%;
  }
}

.toolbar__title {
  width: 100px;
  position: relative;
  margin: 0;
  display: flex;
  color: $textColor;
}

.toolbar__title__hover-state {
  font-family: $text-font-stack;
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: $textColor;
  color: $cWhite;
  padding: 5px;
  font-weight: 500;
  display: flex;
  line-height: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.toolbar__title:hover .toolbar__title__hover-state {
  visibility: visible;
}

.toolbar__title__hover-state__title {
  font-size: 12px;
}

.toolbar__logo,
.toolbar__page-icon {
  display: inline-block;
  text-align: center;
  line-height: 55px;
}

.toolbar__title .toolbar__logo {
  flex: 0 0 $toolbarHeight;
  background: no-repeat center url(../images/logo.svg) $brandColor;
  background-size: 75%;
}

.toolbar__page-icon {
  display: inline-block;
  text-align: center;
  line-height: 55px;
  background: no-repeat center url(../images/type-logo.svg) $textColor;
  background-size: 33%;
}

.toolbar__title .toolbar__page-icon {
  flex: 0 0 $toolbarHeight;
}

.toolbar__container {
  display: flex;
  align-items: stretch;

  &:not(:last-child) {
    border-right: 1px solid $greyBorderColor;
  }

  &:not(:first-child) {
    border-left: 1px solid $greyBorderColor;
  }

  // Section containing nav items, indicators, etc
  &--main {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
}

.toolbar__item {
  padding: 0 15px;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  text-align: center;

  &:not(:last-child) {
    border-right: 1px solid $greyBorderColor;
  }

  &--no-spacing {
    // For elements that need the whole area e.g. buttons
    padding: 0;
  }
}

.toolbar__button {
  padding: 0 15px;
  height: 100%;
  display: flex;
  align-items: center;
  // For links
  text-decoration: none;
  color: inherit;

  &:hover:not(:disabled) {
    background: $color200Grey;
    box-shadow: inset 0 3px 0 0 $brandColor;
  }

  &:disabled {
    opacity: 0.5;
  }

  .toolbar--embedded & {
    flex-grow: 0;
    align-items: center;
    text-decoration: none;
    background-color: $brandColor;
    color: white;
    height: auto;
    padding: 5px 20px;
    margin: 10px;

    &:hover:not(:disabled) {
      background: $darkBrandColor;
      box-shadow: none;
    }
  }
}

// Dropdown select box
.toolbar__item__dropdown-label {
  display: block;
  position: relative;

  &:after {
    content: ' ';
    background: url(../images/arrow.png) no-repeat right center;
    background-size: 12px;
    width: 17px;
    position: absolute;
    height: 100%;
    top: 0;
    right: 15px;
    pointer-events: none;
  }
}

.toolbar__item__dropdown {
  background-color: transparent;
  font-weight: normal;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 16px 25px 17px 5px;
  margin-left: 5px;
  outline: none;
  cursor: pointer;
}

// Abstracted class to relate nav items
.main-nav {
  flex-grow: 2;

  &:not(:last-child) {
    border-right: 1px solid $greyBorderColor;
  }
}

.main-nav__list {
  text-align: right;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  height: 100%;
}

.save-state {
  color: $cGreen33;
  text-transform: uppercase;

  .save-state__loader {
    visibility: hidden;
    display: block;
  }
}

.publish-state {
  text-transform: uppercase;
  padding: 2px 8px;
  color: $cWhite;
  background-color: $color600Grey;
  border-radius: 2em;

  &--draft {
    background-color: $cBlue;
  }

  &--published {
    background-color: $cGreen33;
  }

  &--unpublished-changes {
    background-color: $cYellow;
    color: $textColor;
  }

  &--taken-down {
    background-color: $cRedB5;
  }
}

.word-count__message {
  display: none;
}

.presence-names-single {
  color: $color600Grey;
  border: 1px solid currentColor;
  padding: 5px;
  border-radius: 50%;

  &:not(:last-of-type) {
    margin-right: 5px;
  }
}