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
   7   input[type="submit"],
   8   input[type="text"] {
   9     -webkit-appearance: none;
  10   }
  11
  12   #menu-icon {
  13     display: inline-block !important;
  14   }
  15
  16   nav.primary,
  17   nav.secondary {
  18     float: none !important;
  19     position: relative;
  20     display: block;
  21     clear: both;
  22   }
  23
  24   header {
  25     height: auto;
  26     min-height: $headerHeight;
  27     background: #fff;
  28
  29     h1 {
  30       padding-bottom: 15px;
  31     }
  32
  33     &.closed nav {
  34       display: none;
  35     }
  36
  37     .search_forms {
  38       display: block;
  39     }
  40   }
  41
  42   #sidebar .search_forms,
  43   #edit_tab,
  44   #export_tab {
  45     display: none;
  46   }
  47
  48   nav.primary {
  49     padding: 0;
  50
  51     ul, li {
  52       border: none;
  53       border-radius: 0;
  54       width: 100%;
  55     }
  56
  57     ul {
  58       border-top: 1px solid #eee;
  59       li {
  60         border-bottom: 1px solid #eee;
  61         border-right: none;
  62         > a {
  63           border-radius: 0;
  64           width: 100%;
  65           text-align: center;
  66           font-size: 15px;
  67         }
  68       }
  69     }
  70
  71     .btn-group {
  72       width: 100%;
  73       padding: 10px;
  74     }
  75   }
  76
  77   nav.secondary {
  78     .user-menu {
  79       width: 100%;
  80     }
  81   }
  82
  83   #compact-secondary-nav {
  84     display: none;
  85   }
  86
  87   .compact-hide {
  88     display: inline-block;
  89   }
  90
  91
  92   .overlay-sidebar #sidebar .welcome.visible {
  93     display: none;
  94   }
  95
  96   .overlay-sidebar #sidebar #banner {
  97     display: none;
  98   }
  99
 100   .leaflet-top.leaflet-right {
 101     top: 10px !important;
 102   }
 103
 104   /* Rules for the login form */
 105
 106   #login_login input#user_email {
 107     width: 100%;
 108     max-width: 18em;
 109   }
 110
 111   #login_login input#user_password {
 112     width: 100%;
 113     max-width: 18em;
 114   }
 115
 116   #login_login input#openid_url {
 117     width: 100%;
 118     max-width: 18em;
 119   }
 120
 121   #login_openid_buttons td {
 122     padding: 2px;
 123   }
 124
 125   /* Rules for the user view */
 126
 127   .user_map {
 128     width: 100% !important;
 129     height: 300px !important;
 130   }
 131
 132   #userinformation .deemphasize {
 133     position: relative;
 134     right: auto; left: auto;
 135     margin-top: 10px;
 136     top: auto;
 137   }
 138
 139   &.site-about #content .attr h1 {
 140     font-size: 28px;
 141   }
 142
 143 }
 144
 145 @media (max-width: 767.98px) {
 146   body.map-layout {
 147     #sidebar, #map {
 148       position: relative;
 149       overflow-x: hidden;
 150       width: 100%;
 151       height: 50%;
 152     }
 153
 154     .overlay-sidebar {
 155       #sidebar {
 156         position: absolute;
 157         width: 300px;
 158         height: auto;
 159         overflow: hidden;
 160       }
 161
 162       #map {
 163         height: 100%;
 164       }
 165     }
 166
 167     #map-ui {
 168       z-index: 9999;
 169       width: 100%;
 170       overflow-y: scroll;
 171     }
 172   }
 173 }