amatriain/feedbunch

View on GitHub
FeedBunch-app/app/assets/stylesheets/partials/_navbar.scss

Summary

Maintainability
Test Coverage
body.navbar-visible{
  padding-top: 50px;
}

.navbar {

  box-shadow: 0 1px 10px silver;

  .navbar-header {

    .navbar-brand {

      font-family: Ubuntu;
      font-size: 20px;

      img {
        margin-top: -5px;
      }
    }
  }

  button {
    margin: {
      top: 5px;
      bottom: 5px;
    }
  }

  button#toggle-sidebar-hidden {
    padding: {
      left: 7px;
      right: 8px;
    }
  }

  .navbar-toggle-left {
    margin-left: 15px;

    padding: {
      left: 14px;
      right: 14px;
    }
  }

  @media (max-width: $screen-sm-min) {
    /* Larger font in navbar at smartphone resolutions, menu has almost the whole screen width */
    .nav li a {
      font-family: OpenSans;
      font-size: 16px;
    }

    a:active {
      background-color: #E7E7E7 !important;
    }

    .navbar-collapse a{
      text-align: left;
    }

    /* Limit user name width in the navbar at different resolutions */
    #user-dropdown {
      max-width: 100%;

      #user-name {
        display: inline-block;
        max-width: 90%;
      }
    }
  }

  @media (min-width: $screen-sm-min) and (max-width: $screen-md-min) {
    /* Smaller font in navbar at tablet resolutions, to avoid navbar occupying two lines */
    .nav li a {
      font-family: OpenSans;
      font-size: 14px;
    }

    /* Limit user name width in the navbar at different resolutions */
    #user-dropdown {
      max-width: 130px;

      #user-name {
        display: none;
      }
    }
  }

  @media (min-width: $screen-md-min) {
    /* Larger font in navbar at larger resolutions, for better usability */
    .nav li a {
      font-family: OpenSans;
      font-size: 16px;
    }

    #user-dropdown {
      max-width: 300px;

      #user-name {
        display: inline-block;
        max-width: 200px;
      }
    }
  }

  .dropdown-menu {
    font-size: 16px;
  }

  #user-dropdown {

    #user-management {
      padding-bottom: 14px;

      #user-name {
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
      }
    }
  }

  /* Truncate very long folder names in the dropdown */

  #folder-management-dropdown {

    @media (max-width: $screen-sm-min) {
      #folder-dropdown-content {
        max-width: 100%;
      }
    }

    @media (min-width: $screen-sm-min) {
      #folder-dropdown-content {
        max-width: 180px;
      }
    }

    #folder-dropdown-content {

      .dropdown-folder-title {
        max-width: 100%;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
      }
    }
  }

  /* Better colors etc for the app menu in smartphone screens */

  @media (max-width: $screen-sm-min) {
    .navbar-collapse {
      background-color: #ffffff;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
      background-image: linear-gradient(to bottom, #FFFFFF 0px, #F8F8F8 100%);
      overflow-x: hidden;

      .dropdown-menu {
        background-color: #F2F2F2 !important;

        .divider {
          background-color: #B5B5B5;
        }
      }
    }
  }
}