app/assets/stylesheets/small.scss

   1 @import "parameters";
   2
   3 /* Styles specific to a small screen, such as iPhone, Android, etc... */
   4
   5 body.small-nav {
   6   #menu-icon {
   7     display: inline-block !important;
   8   }
   9
  10   nav.primary,
  11   nav.secondary {
  12     float: none !important;
  13     position: relative;
  14     display: block;
  15     clear: both;
  16   }
  17
  18   header {
  19     height: auto;
  20     min-height: $headerHeight;
  21     background: #fff;
  22
  23     &.closed nav {
  24       display: none;
  25     }
  26
  27     .search_forms {
  28       display: block;
  29     }
  30   }
  31
  32   #sidebar .search_forms,
  33   #edit_tab,
  34   #export_tab {
  35     display: none;
  36   }
  37
  38   nav.primary {
  39     padding: 0;
  40
  41     ul, li {
  42       border: none;
  43       border-radius: 0;
  44       width: 100%;
  45     }
  46
  47     ul {
  48       border-top: 1px solid #eee;
  49       li {
  50         border-bottom: 1px solid #eee;
  51         border-right: none;
  52         > a {
  53           border-radius: 0;
  54           width: 100%;
  55           text-align: center;
  56           font-size: 15px;
  57         }
  58       }
  59     }
  60
  61     .btn-group {
  62       width: 100%;
  63       padding: 10px;
  64     }
  65   }
  66
  67   nav.secondary {
  68     .user-menu {
  69       width: 100%;
  70     }
  71   }
  72
  73   #compact-secondary-nav {
  74     display: none;
  75   }
  76
  77   .compact-hide {
  78     display: inline-block;
  79   }
  80
  81   .overlay-sidebar #sidebar .welcome.visible {
  82     display: none;
  83   }
  84
  85   .overlay-sidebar #sidebar #banner {
  86     display: none;
  87   }
  88
  89   .leaflet-top.leaflet-right {
  90     top: 10px !important;
  91   }
  92 }
  93
  94 @media (max-width: 767.98px) {
  95   body.map-layout {
  96     #sidebar, #map {
  97       position: relative;
  98       overflow-x: hidden;
  99       width: 100%;
 100       height: 50%;
 101     }
 102
 103     .overlay-sidebar {
 104       #sidebar {
 105         position: absolute;
 106         width: 350px;
 107         height: auto;
 108         overflow: hidden;
 109       }
 110
 111       #map {
 112         height: 100%;
 113       }
 114     }
 115
 116     #map-ui {
 117       z-index: 9999;
 118       width: 100%;
 119       overflow-y: scroll;
 120     }
 121   }
 122 }