scinote-web/app/assets/stylesheets/themes/main_navigation.scss

@import 'constants';
@import "mixins";

:root {
  --navbar-height: 51px;
}

#main-nav {
  box-shadow: $flyout-shadow;
  margin-bottom: 0;
}

#notifications-dropdown {
  margin-left: 15px;
  padding-left: 15px;

  .fa-bell {
    font-size: 16px;
  }

  #count-notifications {
    background-color: $brand-accent;
    border-radius: 8px;
    display: none;
    font-size: 11px;
    font-weight: bold;
    margin-left: 12px;
    padding: 1px 6px;
    position: relative;
    top: -10px;
    z-index: 1;
  }
}

.navbar {
  border-radius: 0;
  padding-right: 15px;
}

.navbar-default {
  background-color: $color-white;
  border-color: $color-alto;
}

.navbar-default .navbar-brand {
  align-items: center;
  display: flex;
  padding: 0 .3em 0 .8em;

  #logo {
    max-height: 22px;
  }
}

.open-mobile-app-container {
  display: none;
}

.open-mobile-app-button {
  margin-top: 8px;
}

.dropdown-notifications {
  max-height: 500px;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-bottom: 0;
  padding-top: 0;
  width: 450px;
  word-wrap: break-word;

  .notifications-no-recent {
    padding-bottom: 10px;
    padding-left: 10px;
    padding-top: 10px;
  }

  .notification {
    border-bottom: 1px solid $color-alto;
    padding-bottom: 10px;
    padding-top: 10px;

    &:hover {
      background-color: $color-concrete;
    }
  }

  .unseen {
    border-left: 4px solid $brand-primary;
  }

  .text-center {
    margin-left: 12px;
  }

  .assignment {
    background-color: $brand-primary;
    border-radius: 50%;
    color: $color-concrete;
    display: block;
    font-size: $font-size-h3;
    height: 45px;
    padding-top: 5px;
    width: 45px;
  }

  .deliver {
    background-color: $brand-warning;
    border-radius: 50%;
    color: $color-concrete;
    display: block;
    font-size: $font-size-h3;
    height: 45px;
    padding-top: 5px;
    width: 45px;
  }

  .deliver-error {
    background-color: $brand-danger;
    border-radius: 50%;
    color: $color-concrete;
    display: block;
    font-size: $font-size-h3;
    height: 45px;
    padding-top: 5px;
    width: 45px;
  }

  .system-message {
    background-color: $brand-success;
    border-radius: 50%;
    color: $color-concrete;
    display: block;
    font-size: $font-size-h3;
    height: 45px;
    padding-top: 8px;
    width: 45px;
  }

  .notifications-dropdown-footer {
    background-color: $color-gainsboro;
    padding: 8px;
    text-align: center;

    a:hover {
      background-color: $color-gainsboro;
    }
  }
}

.notification {
  padding-right: 8px;
  word-wrap: break-word;
}

#search-menu {
  padding-right: 0;

  .nav {
    position: relative;
    z-index: 1000;
  }
}

#search-content {
  padding-left: 0;
}

#search-container {
  padding-left: 45px;

  .mce-i-marvinjs {
    position: relative;

    &::before {
      display: inline-block;
      left: 0;
      top: 10px;
    }
  }
}

/** Search */
.nav-search {
  li.disabled {
    opacity: .8;

    .badge {
      background-color: $color-emperor;
      opacity: .8;
    }

  }

  .repositories-team {
    padding: 10px 15px;

    &.active {
      color: $brand-primary;
    }
  }

  .repository-search {
    padding-left: 15px;

    .fas-custom {
      fill: $brand-primary;
    }

    &.active {
      .fas-custom {
        fill: $color-white !important;
      }
    }

    &.disabled {
      .fas-custom {
        fill: $color-silver-chalice;
      }
    }
  }
}

.preferences-settings-container {
  margin-bottom: 50px;
  margin-top: 50px;

  h4 {
    font-weight: 600;
    margin-bottom: 2rem;
  }

  .col-sm-4 {
    padding-left: 5rem;
    padding-top: .5rem;
    word-break: break-word;
  }

  .col-sm-2 {
    padding-left: 3rem;
    padding-top: .7rem;
  }

  @media (max-width: 768px) {
    .col-sm-4 {
      margin-bottom: 1rem;
      padding-left: 1.8rem;
    }

    .col-sm-2 {
      padding-left: 1.8rem;
    }
  }

  .btn-group {
    margin-bottom: 15px;
  }

  .assignment {
    background-color: $brand-primary;
    border-radius: 50%;
    color: $color-concrete;
    display: block !important;
    font-size: $font-size-base;
    height: 30px;
    margin-right: 15px;
    padding: 7px;
    padding-bottom: 5px;
    padding-top: 5px;
    width: 30px;
  }

  .system-message {
    background-color: $brand-success;
    border-radius: 50%;
    color: $color-concrete;
    display: block !important;
    font-size: $font-size-base;
    height: 30px;
    margin-right: 15px;
    padding: 8px;
    padding-bottom: 5px;
    padding-top: 5px;
    width: 30px;
  }

  .img-circle {
    margin-right: 15px;
  }
}

// Global team switch
#team-switch {
  word-wrap: break-word;

  .team-name {
    margin-left: 17px;
  }

  .edit_user {
    height: calc(100% - 35px);
    position: relative;
  }

  .fa-check-circle {
    color: $brand-primary;
    margin-left: -2px;
    margin-right: 2px;
  }

  .team-name-item {
    border-bottom: 1px solid $color-gainsboro;
    padding-bottom: 8px;
    padding-top: 5px;
  }

  li:last-child {
    border-bottom: 0;
  }

  .selected-team {
    margin-left: 15px;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 230px;
  }

  .btn-group {
    margin-top: 8px;
  }

  .dropdown-menu {
    border-radius: 0;
    height: auto;
    margin-top: 0;
    max-height: calc(100vh - 50px);
    overflow: auto;
    padding-bottom: 0;
    padding-top: 0;
    width: 100%;

    .team-container {
      height: calc(100% - 35px);
      position: relative;
    }
  }

  i {
    margin-right: 5px;
  }

  li {
    display: block;
    text-align: left;
    word-wrap: break-word;

    &.new-team {
      border-top: 1px solid $color-alto;
      height: 35px;
      line-height: 30px;

      a {
        line-height: 30px;
        padding: 0 20px;
      }
    }

    &:hover {
      background-color: $color-concrete;
    }

    a {
      color: $color-emperor;
      display: block;
      padding: 3px 20px;
      text-align: left;
      text-decoration: none;
      word-wrap: break-word;
    }
  }
}

#nav-team-switch {
  margin-left: 0;
}

.custom-nav-dropdown {
  border: 1px solid $color-alto;
  padding: 10px 0 10px 30px;
}

#content-wrapper {
  margin-top: 50px;
  margin-left: 83px;
}

#search-bar {
  padding-right: 0;
}

@media (max-width: 768px) {
  #search-bar {
    padding: 10px 30px;
  }
}

// reset margins on small screens
@media (max-width: 1188px) {

  #nav-team-switch {
    margin-left: 0;
  }
}

// System notiifcations dropdown

#system-notifications-dropdown {

  .fa-gift {
    font-size: 16px;
  }

  #count-system-notifications {
    background-color: $brand-accent;
    border-radius: 5px;
    display: none;
    font-size: 11px;
    font-weight: bold;
    margin-left: 12px;
    padding: 1px 6px;
    position: relative;
    top: -10px;
    left: 4px;
    z-index: 1;
  }
}

.dropdown-system-notifications {
  margin-bottom: 10px;
  max-height: 500px;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-bottom: 0;
  padding-top: 0;
  width: 450px;
  word-wrap: break-word;

  .system-notifications-no-recent {
    padding: 10px;
    text-align: center;
  }

  .system-notifications-dropdown-header {
    margin-bottom: 0;

    .show-all {
      margin-left: 20px;

    }

    a {
      font-size: $font-size-small;
      font-weight: $headings-font-weight;
    }
  }
}