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
 125 @media (max-width: 767.98px) {
 126   body.map-layout {
 127     #sidebar, #map {
 128       position: relative;
 129       overflow-x: hidden;
 130       width: 100%;
 131       height: 50%;
 132     }
 133
 134     .overlay-sidebar {
 135       #sidebar {
 136         position: absolute;
 137         width: 300px;
 138         height: auto;
 139         overflow: hidden;
 140       }
 141
 142       #map {
 143         height: 100%;
 144       }
 145     }
 146
 147     #map-ui {
 148       z-index: 9999;
 149       width: 100%;
 150       overflow-y: scroll;
 151     }
 152   }
 153 }