a556030931
In essence, tests are not an importable submodule anymore but an independent piece of code that won't be installed in a user's site-packages directory.
115 lines
1.8 KiB
Plaintext
115 lines
1.8 KiB
Plaintext
/*
|
|
CSS media groups
|
|
*/
|
|
@media screen, projection {
|
|
html {
|
|
background: #fffef0;
|
|
color: #300;
|
|
}
|
|
body {
|
|
max-width: 35em;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
/*
|
|
Variables
|
|
*/
|
|
@media print {
|
|
@var: 42;
|
|
.class {
|
|
color: blue;
|
|
.sub {
|
|
width: @var;
|
|
}
|
|
}
|
|
.top, header > h1 {
|
|
color: #222 * 2;
|
|
}
|
|
}
|
|
@media screen {
|
|
@base: 8;
|
|
body { max-width: @base * 60; }
|
|
}
|
|
/*
|
|
pseudo
|
|
*/
|
|
@media all and (orientation:portrait) {
|
|
aside { float: none; }
|
|
}
|
|
@media not screen and (color), print and (color) {
|
|
body { margin: 0 auto; }
|
|
}
|
|
|
|
/*
|
|
|
|
*/
|
|
@media (min-width: 768px) and (max-width: 979px) {
|
|
.hidden-desktop { display: none !important; }
|
|
}
|
|
|
|
@minwidth: 12px;
|
|
@media (min-width: @minwidth) {
|
|
body { margin: 0 auto; }
|
|
}
|
|
/*
|
|
Expressions
|
|
*/
|
|
@foo: 768px - 1;
|
|
@media (width: @foo) {
|
|
.visible-xs { display: block; }
|
|
}
|
|
|
|
/*
|
|
Vendor extensions and expressions
|
|
*/
|
|
@media
|
|
only screen and ( min--moz-device-pixel-ratio: 5/2),
|
|
only screen and ( -o-min-device-pixel-ratio: 2/1),
|
|
only screen and ( min-device-pixel-ratio: 2),
|
|
only screen and ( min-resolution: 192dpi),
|
|
only screen and ( min-resolution: 2dppx) {
|
|
background-size: 10px;
|
|
}
|
|
/*
|
|
Nested media queries
|
|
*/
|
|
.lead {
|
|
@media (width: 768px) {
|
|
font-size: 21px;
|
|
}
|
|
}
|
|
.one {
|
|
@media (width: 400px){
|
|
font-size: 1.2em;
|
|
@media print and (color) {
|
|
color: blue;
|
|
}
|
|
}
|
|
}
|
|
.two {
|
|
@media (width: 400px){
|
|
font-size: 1.2em;
|
|
}
|
|
@media print and (color) {
|
|
color: blue;
|
|
}
|
|
width: 100px;
|
|
}
|
|
.visible {
|
|
@media print {
|
|
color: green;
|
|
}
|
|
&.visible-sm {
|
|
@media screen {
|
|
color: green;
|
|
}
|
|
}
|
|
}
|
|
.navbar {
|
|
.form {
|
|
@media (max-width: 10px) {
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
}
|