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