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
  76   nav.secondary {
  77     border-bottom: 1px solid #eee;
  78
  79     .user-menu {
  80       display: block;
  81       width: 100%;
  82       margin-left: 0;
  83       > li {
  84         width: 49%;
  85         > a {
  86           width: 100%;
  87           text-align: center;
  88         }
  89       }
  90     }
  91   }
  92
  93   #compact-secondary-nav {
  94     display: none;
  95   }
  96
  97   .compact-hide {
  98     display: inline-block;
  99   }
 100
 101   .map-layout {
 102     #sidebar, #map {
 103       position: relative;
 104       overflow-x: hidden;
 105       width: 100%;
 106       height: 50%;
 107     }
 108
 109     .overlay-sidebar {
 110       #sidebar {
 111         width: 300px;
 112       }
 113
 114       #map {
 115         height: 100%;
 116       }
 117     }
 118
 119     #map-ui {
 120       z-index: 9999;
 121       width: 100%;
 122       overflow-y: scroll;
 123     }
 124   }
 125
 126   #sidebar .welcome {
 127     display: none !important;
 128   }
 129
 130   .leaflet-top.leaflet-right {
 131     top: 10px !important;
 132     z-index: 0;
 133   }
 134
 135   .content_map {
 136     width: 100%;
 137     border: none;
 138     float: none;
 139     height: 200px;
 140     max-height: none;
 141     min-height: auto;
 142   }
 143
 144   /* Rules for the login form */
 145
 146   #login_login input#user_email {
 147     width: 100%;
 148     max-width: 18em;
 149   }
 150
 151   #login_login input#user_password {
 152     width: 100%;
 153     max-width: 18em;
 154   }
 155
 156   #login_login input#openid_url {
 157     width: 100%;
 158     max-width: 18em;
 159   }
 160
 161   #login_openid_buttons td {
 162     padding: 2px;
 163   }
 164
 165   /* Rules for the user view */
 166
 167   .user_map {
 168     width: 100% !important;
 169     height: 300px !important;
 170   }
 171
 172   #userinformation .deemphasize {
 173     position: relative;
 174     right: auto; left: auto;
 175     margin-top: 10px;
 176     top: auto;
 177   }
 178
 179   /* Rules for the sign-up page */
 180
 181   .user-new,
 182   .user-create {
 183     .col6 {
 184       width: 100%;
 185     }
 186
 187     .aside {
 188       display: none;
 189     }
 190   }
 191
 192   .site-about #content .attr h1 {
 193     font-size: 28px;
 194   }
 195
 196 }