app/assets/stylesheets/mobile.scss
//
// Mobile-specific media queries
//
@import "bootstrap";
@import "bootstrap-responsive";
@import 'font-awesome';
@import "compass/css3/box";
// Swap the below two lines when debugging/styling in Chrome, which
// can't get smaller than 400px wide
@media (max-width: 481px) {
// correct for Bootstrap's padding
body {
padding-left: 0;
padding-right: 0;
}
// un-correct correction of Bootstrap's padding
.navbar {
padding-left: 20px;
padding-right: 20px;
}
.block {
border-bottom: 1px solid #ccc;
padding-bottom: 0;
&.header {
background-color: #444;
h2 {
font-size: 1rem;
line-height: 1.1rem;
color: white;
}
i.icon-plus-sign {
margin-top: 0;
font-size: 1rem;
}
}
}
.block:first-child {
margin-top: 0;
}
.with-hint {
padding-bottom: 8px;
}
form .block label {
display: none;
}
input, select, textarea {
&.wide {
display: block;
width: 100%;
padding-left: 0;
padding-right: 0;
margin-bottom: 8px;
}
}
textarea.wide {
box-sizing: border-box;
}
.hint {
padding: 0 14px;
}
// copied from a more recent version of Bootstrap to get full-width buttons
.btn.btn-block {
width: 100%;
padding-left: 0;
padding-right: 0;
display: block;
margin-bottom: 8px;
}
.btn-group.btn-block {
@include display-box;
@include box-orient(horizontal);
padding-left: 0;
padding-right: 0;
width: 100%;
margin-bottom: 8px;
button {
@include display-box;
@include box-orient(horizontal);
@include box-pack(center);
@include box-flex(1);
}
}
}
@media (max-width: 1025px) {
.bottom.navbar form {
display: none;
}
}