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   .overlay-sidebar #sidebar .welcome.visible {
  92     display: none;
  93   }
  94
  95   .overlay-sidebar #sidebar #banner {
  96     display: none;
  97   }
  98
  99   .leaflet-top.leaflet-right {
 100     top: 10px !important;
 101   }
 102
 103   /* Rules for the login form */
 104
 105   #login_login input#user_email {
 106     width: 100%;
 107     max-width: 18em;
 108   }
 109
 110   #login_login input#user_password {
 111     width: 100%;
 112     max-width: 18em;
 113   }
 114
 115   #login_login input#openid_url {
 116     width: 100%;
 117     max-width: 18em;
 118   }
 119
 120   #login_openid_buttons td {
 121     padding: 2px;
 122   }
 123
 124   /* Rules for the user view */
 125
 126   .user_map {
 127     width: 100% !important;
 128     height: 300px !important;
 129   }
 130
 131   &.site-about #content .attr h1 {
 132     font-size: 28px;
 133   }
 134
 135 }
 136
 137 @media (max-width: 767.98px) {
 138   body.map-layout {
 139     #sidebar, #map {
 140       position: relative;
 141       overflow-x: hidden;
 142       width: 100%;
 143       height: 50%;
 144     }
 145
 146     .overlay-sidebar {
 147       #sidebar {
 148         position: absolute;
 149         width: 300px;
 150         height: auto;
 151         overflow: hidden;
 152       }
 153
 154       #map {
 155         height: 100%;
 156       }
 157     }
 158
 159     #map-ui {
 160       z-index: 9999;
 161       width: 100%;
 162       overflow-y: scroll;
 163     }
 164   }
 165 }