KNACSS/less/09-booleans.less
2014-04-20 20:50:43 +02:00

156 lines
2.3 KiB
Plaintext

@import "00-config";
// Styling boolean
& when (@styling = true) {
/* styling elements */
code, kbd, mark {
border-radius: 2px;
}
kbd {
padding: 0 2px;
border: 1px solid #999;
}
code {
padding: 2px 4px;
background: rgba(0,0,0,.04);
color: #b11;
}
pre code {
padding: none;
background: none;
color: inherit;
border-radius: 0;
}
mark {
padding:2px 4px;
background: #ff0;
}
sup,
sub {
vertical-align: 0;
position: relative;
}
sup {
bottom: 1ex;
}
sub {
top: .5ex;
}
blockquote {
margin-left: 0;
padding-left: 1em;
border-left: 4px solid rgba(0,0,0,.15);
font-style: italic;
}
q {
font-style: normal;
}
q,
.q {
quotes: "“\00a0" "\00a0”";
}
q:lang(fr),
.q:lang(fr) {
quotes: "«\00a0" "\00a0»";
}
hr {
display: block;
clear: both;
height: 1px;
margin: 1em 0 2em;
padding: 0;
border: 0;
color: #ccc;
background-color: #ccc;
}
}
// IE6, 7, 8 support boolean
& when (@ie678 = true) {
/* IE678 support */
.ie678 h1, .ie678 .h1-like {
.em(@h1-size);
}
.ie678 h2, .ie678 .h2-like {
.em(@h2-size);
}
.ie678 h3, .ie678 .h3-like {
.em(@h3-size);
}
.ie678 h4, .ie678 .h4-like {
.em(@h4-size);
}
.ie678 h5, .ie678 .h5-like {
.em(@h5-size);
}
.ie678 h6, .ie678 .h6-like {
.em(@h6-size);
}
.ie678 img {
width: auto; /* @bugfix for IE8 */
}
.ie678 .gm-style img {
height: 100%;
}
/* hasLayout for IE6/IE7 */
.clearfix,
.line,
.mod,
.row,
.col {
*zoom: 1;
}
/* inline-block and table-cell for IE6/IE7 */
/* warning: .col needs width on IE6/IE7 */
.btn,
.col,
.inbl {
*display: inline;
*zoom: 1;
}
.visually-hidden {
*clip: rect(1px 1px 1px 1px);
}
/* Active box-sizing for IE6/IE7 */
/* @source https://github.com/Schepp/box-sizing-polyfill */
/*
.ie67 * {
behavior: url(/lib/box-sizing-polyfill/boxsizing.htc);
}
*/
}
// skip-links boolean
& when (@skip-links = true) {
/* styling skip links */
.skip-links {
position: absolute;
a {
position: absolute;
left: -7000px;
padding: 0.5em;
background: black;
color: white;
text-decoration: none;
&:focus {
position: static;
}
}
}
}
// hyphens boolean
& when (@hyphens = true) {
@media (max-width: @small-screen) {
/* you shall not pass */
div, textarea, table, td, th, code, pre, samp {
word-wrap: break-word;
hyphens: auto;
}
}
}