Refactor About header to use bootstrap and flex

[rails.git] / app / assets / stylesheets / small.scss

@import "parameters";

/* Styles specific to a small screen, such as iPhone, Android, etc... */

body.small-nav {
  #menu-icon {
    display: inline-block !important;
  }

  nav.primary,
  nav.secondary {
    float: none !important;
    position: relative;
    display: block;
    clear: both;
  }

  header {
    height: auto;
    min-height: $headerHeight;
    background: #fff;

    &.closed nav {
      display: none;
    }

    .search_forms {
      display: block;
    }
  }

  #sidebar .search_forms,
  #edit_tab,
  #export_tab {
    display: none;
  }

  nav.primary {
    padding: 0;

    ul, li {
      border: none;
      border-radius: 0;
      width: 100%;
    }

    ul {
      border-top: 1px solid #eee;
      li {
        border-bottom: 1px solid #eee;
        border-right: none;
        > a {
          border-radius: 0;
          width: 100%;
          text-align: center;
          font-size: 15px;
        }
      }
    }

    .btn-group {
      width: 100%;
      padding: 10px;
    }
  }

  nav.secondary {
    .user-menu {
      width: 100%;
    }
  }

  #compact-secondary-nav {
    display: none;
  }

  .compact-hide {
    display: inline-block;
  }

  .overlay-sidebar #sidebar .welcome.visible {
    display: none;
  }

  .overlay-sidebar #sidebar #banner {
    display: none;
  }

  .leaflet-top.leaflet-right {
    top: 10px !important;
  }
}

@media (max-width: 767.98px) {
  body.map-layout {
    #sidebar, #map {
      position: relative;
      overflow-x: hidden;
      width: 100%;
      height: 50%;
    }

    .overlay-sidebar {
      #sidebar {
        position: absolute;
        width: 350px;
        height: auto;
        overflow: hidden;
      }

      #map {
        height: 100%;
      }
    }

    #map-ui {
      z-index: 9999;
      width: 100%;
      overflow-y: scroll;
    }
  }
}