app/assets/stylesheets/small.scss

   1 @import "parameters";
   2
   3 /* Styles specific to a small screen, such as iPhone, Android, etc... */
   4 @media (max-width: 640px) {
   5   body {
   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
  64         li {
  65           border-bottom: 1px solid #eee;
  66           border-right: none;
  67
  68           > a {
  69             border-radius: 0;
  70             width: 100%;
  71             text-align: center;
  72             font-size: 15px;
  73           }
  74         }
  75       }
  76
  77       .btn-group {
  78         width: 100%;
  79         padding: 10px;
  80       }
  81     }
  82
  83     nav.secondary {
  84       .user-menu {
  85         width: 100%;
  86       }
  87     }
  88
  89     #compact-secondary-nav {
  90       display: none;
  91     }
  92
  93     .compact-hide {
  94       display: inline-block;
  95     }
  96
  97     &.map-layout {
  98       #sidebar, #map {
  99         position: relative;
 100         overflow-x: hidden;
 101         width: 100%;
 102         height: 50%;
 103       }
 104
 105       .overlay-sidebar {
 106         #sidebar {
 107           position: absolute;
 108           width: 300px;
 109           height: auto;
 110           overflow: hidden;
 111         }
 112
 113         #map {
 114           height: 100%;
 115         }
 116       }
 117
 118       #map-ui {
 119         z-index: 9999;
 120         width: 100%;
 121         overflow-y: scroll;
 122       }
 123     }
 124
 125     .overlay-sidebar #sidebar .welcome.visible {
 126       display: none;
 127     }
 128
 129     .overlay-sidebar #sidebar #banner {
 130       display: none;
 131     }
 132
 133     .leaflet-top.leaflet-right {
 134       top: 10px !important;
 135     }
 136
 137     .content_map {
 138       width: 100%;
 139       border: none;
 140       float: none;
 141       height: 200px;
 142       max-height: none;
 143       min-height: auto;
 144     }
 145
 146     /* Rules for the login form */
 147
 148     #login_login input#user_email {
 149       width: 100%;
 150       max-width: 18em;
 151     }
 152
 153     #login_login input#user_password {
 154       width: 100%;
 155       max-width: 18em;
 156     }
 157
 158     #login_login input#openid_url {
 159       width: 100%;
 160       max-width: 18em;
 161     }
 162
 163     #login_openid_buttons td {
 164       padding: 2px;
 165     }
 166
 167     /* Rules for the user view */
 168
 169     .user_map {
 170       width: 100% !important;
 171       height: 300px !important;
 172     }
 173
 174     #userinformation .deemphasize {
 175       position: relative;
 176       right: auto;
 177       left: auto;
 178       margin-top: 10px;
 179       top: auto;
 180     }
 181
 182     &.site-about #content .attr h1 {
 183       font-size: 28px;
 184     }
 185
 186   }
 187 }