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 {
   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     h1 {
  24       padding-bottom: 15px;
  25     }
  26
  27     &.closed nav {
  28       display: none;
  29     }
  30
  31     .search_forms {
  32       display: block;
  33     }
  34   }
  35
  36   #sidebar .search_forms,
  37   #edit_tab,
  38   #export_tab {
  39     display: none;
  40   }
  41
  42   nav.primary {
  43     padding: 0;
  44
  45     ul, li {
  46       border: none;
  47       border-radius: 0;
  48       width: 100%;
  49     }
  50
  51     ul {
  52       border-top: 1px solid #eee;
  53       li {
  54         border-bottom: 1px solid #eee;
  55         border-right: none;
  56         > a {
  57           border-radius: 0;
  58           width: 100%;
  59           text-align: center;
  60           font-size: 15px;
  61         }
  62       }
  63     }
  64
  65     .btn-group {
  66       width: 100%;
  67       padding: 10px;
  68     }
  69   }
  70
  71   nav.secondary {
  72     .user-menu {
  73       width: 100%;
  74     }
  75   }
  76
  77   #compact-secondary-nav {
  78     display: none;
  79   }
  80
  81   .compact-hide {
  82     display: inline-block;
  83   }
  84
  85   .overlay-sidebar #sidebar .welcome.visible {
  86     display: none;
  87   }
  88
  89   .overlay-sidebar #sidebar #banner {
  90     display: none;
  91   }
  92
  93   .leaflet-top.leaflet-right {
  94     top: 10px !important;
  95   }
  96
  97   /* Rules for the login form */
  98
  99   #login_login input#user_email {
 100     width: 100%;
 101     max-width: 18em;
 102   }
 103
 104   #login_login input#user_password {
 105     width: 100%;
 106     max-width: 18em;
 107   }
 108
 109   #login_login input#openid_url {
 110     width: 100%;
 111     max-width: 18em;
 112   }
 113
 114   #login_openid_buttons td {
 115     padding: 2px;
 116   }
 117 }
 118
 119 @media (max-width: 767.98px) {
 120   body.map-layout {
 121     #sidebar, #map {
 122       position: relative;
 123       overflow-x: hidden;
 124       width: 100%;
 125       height: 50%;
 126     }
 127
 128     .overlay-sidebar {
 129       #sidebar {
 130         position: absolute;
 131         width: 300px;
 132         height: auto;
 133         overflow: hidden;
 134       }
 135
 136       #map {
 137         height: 100%;
 138       }
 139     }
 140
 141     #map-ui {
 142       z-index: 9999;
 143       width: 100%;
 144       overflow-y: scroll;
 145     }
 146   }
 147 }