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