General normalization on LESS files

This commit is contained in:
Raphael Goetter 2014-05-07 10:45:47 +02:00
parent 5e1e4f9eb5
commit 01633e9d9e
14 changed files with 741 additions and 196 deletions

View file

@ -1,6 +1,5 @@
// Config file : variables, mixins, ... // Config file : variables, mixins, ...
// booleans // booleans
@enable-ie678 : true; // "true" to activate IE6/IE7/IE8 support @enable-ie678 : true; // "true" to activate IE6/IE7/IE8 support
@enable-styling : true; // "true" to design basic elements like code, mark, blockquotes, etc. @enable-styling : true; // "true" to design basic elements like code, mark, blockquotes, etc.
@ -52,7 +51,6 @@
// misc // misc
@gutter : 20px; // gutter value (%, px, em, rem) for grid layouts @gutter : 20px; // gutter value (%, px, em, rem) for grid layouts
// LESS mixins : don't touch or you'll be banned ;) // LESS mixins : don't touch or you'll be banned ;)
// px to em/rem // px to em/rem
.rem(@size, @bf: @base-font-size){ .rem(@size, @bf: @base-font-size){

View file

@ -19,23 +19,28 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
ul, ul,
ol { ol {
padding-left: 2em; padding-left: 2em;
} }
ul.unstyled { ul.unstyled {
list-style: none; list-style: none;
} }
img { img {
height: auto; height: auto;
vertical-align: middle; vertical-align: middle;
border: 0; border: 0;
} }
audio, audio,
canvas, canvas,
video { video {
display: inline-block; display: inline-block;
} }
svg:not(:root) { svg:not(:root) {
overflow: hidden; overflow: hidden;
} }
@ -51,6 +56,7 @@ html {
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
text-size-adjust: 100%; text-size-adjust: 100%;
} }
body { body {
background-color: @base-background; background-color: @base-background;
color: @base-color; color: @base-color;
@ -73,28 +79,39 @@ label,
textarea, textarea,
caption, caption,
details, details,
figure, figure {
hgroup {
margin-top: 0.75em; margin-top: 0.75em;
margin-bottom: 0; margin-bottom: 0;
line-height: @line-height; line-height: @line-height;
} }
h1, .h1-like {
h1,
.h1-like {
font-size: @h1-size; font-size: @h1-size;
} }
h2, .h2-like {
h2,
.h2-like {
font-size: @h2-size; font-size: @h2-size;
} }
h3, .h3-like {
h3,
.h3-like {
font-size: @h3-size; font-size: @h3-size;
} }
h4, .h4-like {
h4,
.h4-like {
font-size: @h4-size; font-size: @h4-size;
} }
h5, .h5-like {
h5,
.h5-like {
font-size: @h5-size; font-size: @h5-size;
} }
h6, .h6-like {
h6,
.h6-like {
font-size: @h6-size; font-size: @h6-size;
} }
@ -102,15 +119,19 @@ h6, .h6-like {
.smaller { .smaller {
.em(@base-font-size - 4); .em(@base-font-size - 4);
} }
.small { .small {
.em(@base-font-size - 2); .em(@base-font-size - 2);
} }
.big { .big {
.em(@base-font-size + 2); .em(@base-font-size + 2);
} }
.bigger { .bigger {
.em(@base-font-size + 4); .em(@base-font-size + 4);
} }
.biggest { .biggest {
.em(@base-font-size + 6); .em(@base-font-size + 6);
} }
@ -153,38 +174,51 @@ sup {
/* == hiding content */ /* == hiding content */
/* ----------------------------- */ /* ----------------------------- */
/* hidden but not for assistance tools, Yahoo! method */
.visually-hidden { .visually-hidden {
position: absolute !important; position: absolute !important;
clip: rect(1px, 1px, 1px, 1px); border: 0 !important;
overflow: hidden; height: 1px !important;
height: 1px; width: 1px; width: 1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(1px, 1px, 1px, 1px) !important;
} }
body > script { body > script {
display: none !important; display: none !important;
} }
@media print {
.no-print {
display: none;
}
}
@media (max-width: @small-screen) { @media (max-width: @small-screen) {
.no-small-screen { .no-small-screen {
display: none; display: none;
} }
} }
@media (min-width: @large-screen) { @media (min-width: @large-screen) {
.no-large-screen { .no-large-screen {
display: none; display: none;
} }
} }
/* ----------------------------- */ /* ----------------------------- */
/* == browsers consistency */ /* == browsers consistency */
/* ----------------------------- */ /* ----------------------------- */
/* avoid top margins on first content element */ /* avoid top margins on first content element */
p, .p-like, ul, ol, dl, p,
blockquote, pre, .p-like,
h1, h2, h3, h4, h5, h6 { ul,
ol,
dl,
blockquote,
pre,
h1,
h2,
h3,
h4,
h5,
h6 {
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
} }
@ -200,13 +234,22 @@ li ol {
} }
/* max values */ /* max values */
img, table, td, blockquote, code, pre, textarea, input, video { img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
video {
max-width: 100%; max-width: 100%;
} }
/* margin-bottom on tables */ /* margin-bottom on tables */
table { margin-bottom: @medium-value; } table {
margin-bottom: @medium-value;
}
/* ----------------------------- */ /* ----------------------------- */
/* ==layout and modules */ /* ==layout and modules */
@ -241,6 +284,7 @@ table { margin-bottom: @medium-value; }
table-layout: fixed; table-layout: fixed;
width: 100%; width: 100%;
} }
.row > *, .row > *,
.col { .col {
display: table-cell; display: table-cell;
@ -253,7 +297,6 @@ table { margin-bottom: @medium-value; }
vertical-align: top; vertical-align: top;
} }
/* alignments (blocks and inline) */ /* alignments (blocks and inline) */
/* ------------------------------ */ /* ------------------------------ */
@ -262,65 +305,169 @@ table { margin-bottom: @medium-value; }
.start { .start {
float: left; float: left;
} }
img.left, img.left,
img.start { img.start {
margin-right: @small-value; margin-right: @small-value;
} }
/* right (or ending) elements */ /* right (or ending) elements */
.right, .right,
.end { .end {
float: right; float: right;
} }
img.right, img.right,
img.end { img.end {
margin-left: @small-value; margin-left: @small-value;
} }
img.left, img.right,
img.start, img.end { img.left,
img.right,
img.start,
img.end {
margin-bottom: @tiny-value; margin-bottom: @tiny-value;
} }
.center { margin-left: auto; margin-right: auto; }
.txtleft { text-align: left; }
.txtright { text-align: right; }
.txtcenter { text-align: center; }
.center {
margin-left: auto;
margin-right: auto;
}
.txtleft {
text-align: left;
}
.txtright {
text-align: right;
}
.txtcenter {
text-align: center;
}
// width helpers boolean // width helpers boolean
& when (@enable-helpers-width = true) { & when (@enable-helpers-width = true) {
/* blocks widths (percentage and pixels) */ /* blocks widths (percentage and pixels) */
.w10 { width: 10%; } .w10 {
.w20 { width: 20%; } width: 10%;
.w25 { width: 25%; } }
.w30 { width: 30%; }
.w33 { width: 33.3333%; } .w20 {
.w40 { width: 40%; } width: 20%;
.w50 { width: 50%; } }
.w60 { width: 60%; }
.w66 { width: 66.6666%; } .w25 {
.w70 { width: 70%; } width: 25%;
.w75 { width: 75%; } }
.w80 { width: 80%; }
.w90 { width: 90%; } .w30 {
.w100 { width: 100%; } width: 30%;
}
.w33 {
width: 33.3333%;
}
.w40 {
width: 40%;
}
.w50 {
width: 50%;
}
.w60 {
width: 60%;
}
.w66 {
width: 66.6666%;
}
.w70 {
width: 70%;
}
.w75 {
width: 75%;
}
.w80 {
width: 80%;
}
.w90 {
width: 90%;
}
.w100 {
width: 100%;
}
.w50p {
width: 50px;
}
.w100p {
width: 100px;
}
.w150p {
width: 150px;
}
.w200p {
width: 200px;
}
.w300p {
width: 300px;
}
.w400p {
width: 400px;
}
.w500p {
width: 500px;
}
.w600p {
width: 600px;
}
.w700p {
width: 700px;
}
.w800p {
width: 800px;
}
.w960p {
width: 960px;
}
.mw960p {
max-width: 960px;
}
.w1140p {
width: 1140px;
}
.mw1140p {
max-width: 1140px;
}
.wauto {
width: auto;
}
.w50p { width: 50px; }
.w100p { width: 100px; }
.w150p { width: 150px; }
.w200p { width: 200px; }
.w300p { width: 300px; }
.w400p { width: 400px; }
.w500p { width: 500px; }
.w600p { width: 600px; }
.w700p { width: 700px; }
.w800p { width: 800px; }
.w960p { width: 960px; }
.mw960p { max-width: 960px; }
.w1140p { width: 1140px; }
.mw1140p { max-width: 1140px; }
.wauto { width: auto; }
} }
// spacing helpers boolean // spacing helpers boolean
& when (@enable-helpers-spacing = true) { & when (@enable-helpers-spacing = true) {
/* spacing helpers /* spacing helpers
@ -328,46 +475,164 @@ img.start, img.end {
a,t,r,b,l = all,top,right,bottom,left a,t,r,b,l = all,top,right,bottom,left
s,m,l,n = small, medium, large, none s,m,l,n = small, medium, large, none
*/ */
.man { margin: 0; } .man {
.pan { padding: 0; } margin: 0;
.mas { margin: @small-value; } }
.mam { margin: @medium-value; }
.mal { margin: @large-value; }
.pas { padding: @small-value; }
.pam { padding: @medium-value; }
.pal { padding: @large-value; }
.mtn { margin-top: 0; } .pan {
.mts { margin-top: @small-value; } padding: 0;
.mtm { margin-top: @medium-value; } }
.mtl { margin-top: @large-value; }
.mrn { margin-right: 0; } .mas {
.mrs { margin-right: @small-value; } margin: @small-value;
.mrm { margin-right: @medium-value; } }
.mrl { margin-right: @large-value; }
.mbn { margin-bottom: 0; } .mam {
.mbs { margin-bottom: @small-value; } margin: @medium-value;
.mbm { margin-bottom: @medium-value; } }
.mbl { margin-bottom: @large-value; }
.mln { margin-left: 0; } .mal {
.mls { margin-left: @small-value; } margin: @large-value;
.mlm { margin-left: @medium-value; } }
.mll { margin-left: @large-value; }
.pas {
padding: @small-value;
}
.pam {
padding: @medium-value;
}
.pal {
padding: @large-value;
}
.mtn {
margin-top: 0;
}
.mts {
margin-top: @small-value;
}
.mtm {
margin-top: @medium-value;
}
.mtl {
margin-top: @large-value;
}
.mrn {
margin-right: 0;
}
.mrs {
margin-right: @small-value;
}
.mrm {
margin-right: @medium-value;
}
.mrl {
margin-right: @large-value;
}
.mbn {
margin-bottom: 0;
}
.mbs {
margin-bottom: @small-value;
}
.mbm {
margin-bottom: @medium-value;
}
.mbl {
margin-bottom: @large-value;
}
.mln {
margin-left: 0;
}
.mls {
margin-left: @small-value;
}
.mlm {
margin-left: @medium-value;
}
.mll {
margin-left: @large-value;
}
.ptn {
padding-top: 0;
}
.pts {
padding-top: @small-value;
}
.ptm {
padding-top: @medium-value;
}
.ptl {
padding-top: @large-value;
}
.prn {
padding-right: 0;
}
.prs {
padding-right: @small-value;
}
.prm {
padding-right: @medium-value;
}
.prl {
padding-right: @large-value;
}
.pbn {
padding-bottom: 0;
}
.pbs {
padding-bottom: @small-value;
}
.pbm {
padding-bottom: @medium-value;
}
.pbl {
padding-bottom: @large-value;
}
.pln {
padding-left: 0;
}
.pls {
padding-left: @small-value;
}
.plm {
padding-left: @medium-value;
}
.pll {
padding-left: @large-value;
}
.ptn { padding-top: 0; }
.pts { padding-top: @small-value; }
.ptm { padding-top: @medium-value; }
.ptl { padding-top: @large-value; }
.prn { padding-right: 0; }
.prs { padding-right: @small-value; }
.prm { padding-right: @medium-value; }
.prl { padding-right: @large-value; }
.pbn { padding-bottom: 0; }
.pbs { padding-bottom: @small-value; }
.pbm { padding-bottom: @medium-value; }
.pbl { padding-bottom: @large-value; }
.pln { padding-left: 0; }
.pls { padding-left: @small-value; }
.plm { padding-left: @medium-value; }
.pll { padding-left: @large-value; }
} }

View file

@ -7,52 +7,97 @@
/* grids inspired from SUIT https://github.com/suitcss/suit */ /* grids inspired from SUIT https://github.com/suitcss/suit */
.grid { /* overall container of grids */ /* overall container of grids */
.grid {
overflow: hidden; overflow: hidden;
} }
.grid > * { /* global styles for direct child ex. .grid3 */
/* global styles for direct child ex. .grid3 */
/* 1- gutter value */
.grid > * {
display: block; display: block;
padding: 0; padding: 0;
margin-left: -@gutter; /* gutter value */ margin-left: -@gutter; /* 1 */
text-align: left; text-align: left;
} }
.grid > * > * { /* global styles for each "cell" */
/* global styles for each "cell" */
/* 1- gutter value */
.grid > * > * {
display: inline-block; display: inline-block;
padding-left: @gutter; /* gutter value */ padding-left: @gutter; /* 1 */
margin-left: 0; margin-left: 0;
vertical-align: top; vertical-align: top;
} }
/* whitespace fixing for modern browsers including IE9+ */ /* whitespace fixing for modern browsers including IE9+ */
/* 1- fallback for Opera Mini */
:root .grid { :root .grid {
font-size: 0; font-size: 0;
} }
:root .grid > * > * { :root .grid > * > * {
font-size: @base-font-size; /* fallback for Opera Mini */ font-size: @base-font-size; /* 1 */
font-size: unit((@base-font-size / 10), rem); font-size: unit((@base-font-size / 10), rem);
} }
/* Opera hack */ /* Opera hack */
.opera:-o-prefocus, .opera:-o-prefocus,
.grid > * { .grid > * {
word-spacing: -0.43em; word-spacing: -0.43em;
} }
.grid2 > * {width: 50%;}
.grid3 > * {width: 33.333%;} .grid2 > * {
.grid4 > * {width: 25%;} width: 50%;
.grid5 > * {width: 20%;} }
.grid6 > * {width: 16.667%;}
.grid8 > * {width: 12.5%;} .grid3 > * {
.grid10 > * {width: 10%;} width: 33.333%;
.grid12 > * {width: 8.333%;} }
.grid4 > * {
width: 25%;
}
.grid5 > * {
width: 20%;
}
.grid6 > * {
width: 16.667%;
}
.grid8 > * {
width: 12.5%;
}
.grid10 > * {
width: 10%;
}
.grid12 > * {
width: 8.333%;
}
/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */ /* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */
.grid2-1 > *:first-child, .grid2-1 > *:first-child,
.grid1-2 > * + * { width: 66.666%; } .grid1-2 > * + * {
width: 66.666%;
}
.grid1-2 > *:first-child, .grid1-2 > *:first-child,
.grid2-1 > * + * { width: 33.333%; } .grid2-1 > * + * {
width: 33.333%;
}
.grid1-3 > *:first-child, .grid1-3 > *:first-child,
.grid3-1 > * + * { width: 25%; } .grid3-1 > * + * {
width: 25%;
}
.grid3-1 > *:first-child, .grid3-1 > *:first-child,
.grid1-3 > * + * { width: 75%; } .grid1-3 > * + * {
width: 75%;
}
/* Responsiv-o-matic */ /* Responsiv-o-matic */
@media (max-width: @large-screen) { @media (max-width: @large-screen) {
@ -60,7 +105,9 @@
.grid6 > *, .grid6 > *,
.grid8 > *, .grid8 > *,
.grid10 > *, .grid10 > *,
.grid12 > * {width: 33.333%} .grid12 > * {
width: 33.333%;
}
} }
@media (max-width: @small-screen) { @media (max-width: @small-screen) {
.grid3 > *, .grid3 > *,
@ -69,10 +116,14 @@
.grid6 > *, .grid6 > *,
.grid8 > *, .grid8 > *,
.grid10 > *, .grid10 > *,
.grid12 > * {width: 50%} .grid12 > * {
width: 50%;
}
} }
@media (max-width: @tiny-screen) { @media (max-width: @tiny-screen) {
.grid > * > * {width: 100% !important} .grid > * > * {
width: 100% !important;
}
} }
/* ---------------------------------- */ /* ---------------------------------- */
@ -82,46 +133,79 @@
/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */ /* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
[class*="autogrid"] { /* container of autogrids */ /* container of autogrids */
[class*="autogrid"] {
text-align: justify; text-align: justify;
} }
[class*="autogrid"]:after { [class*="autogrid"]:after {
content: ""; content: "";
display: inline-block; display: inline-block;
width: 100%; width: 100%;
} }
[class*="autogrid"] > * { [class*="autogrid"] > * {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
text-align: left; text-align: left;
} }
/* whitespace fixing for modern browsers including IE9+ */ /* whitespace fixing for modern browsers including IE9+ */
/* 1- fallback for Opera Mini */
:root [class*="autogrid"] { :root [class*="autogrid"] {
font-size: 0; font-size: 0;
} }
:root [class*="autogrid"] > * { :root [class*="autogrid"] > * {
font-size: @base-font-size; /* fallback for Opera Mini */ font-size: @base-font-size; /* 1 */
font-size: unit((@base-font-size / 10), rem); font-size: unit((@base-font-size / 10), rem);
} }
/* Opera hack */ /* Opera hack */
[class*="autogrid"]:-o-prefocus { [class*="autogrid"]:-o-prefocus {
word-spacing: -0.43em; word-spacing: -0.43em;
} }
.autogrid2 > * {width: 49%}
.autogrid3 > * {width: 32%} .autogrid2 > * {
.autogrid4 > * {width: 23.6%} width: 49%;
.autogrid5 > * {width: 19%} }
.autogrid6 > * {width: 15%}
.autogrid8 > * {width: 10.8%} .autogrid3 > * {
.autogrid10 > * {width: 9%} width: 32%;
.autogrid12 > * {width: 6.4%} }
.autogrid4 > * {
width: 23.6%;
}
.autogrid5 > * {
width: 19%;
}
.autogrid6 > * {
width: 15%;
}
.autogrid8 > * {
width: 10.8%;
}
.autogrid10 > * {
width: 9%;
}
.autogrid12 > * {
width: 6.4%;
}
@media (max-width: @large-screen) { @media (max-width: @large-screen) {
.autogrid5 > *, .autogrid5 > *,
.autogrid6 > *, .autogrid6 > *,
.autogrid8 > *, .autogrid8 > *,
.autogrid10 > *, .autogrid10 > *,
.autogrid12 > * {width: 32%} .autogrid12 > * {
width: 32%;
}
} }
@media (max-width: @small-screen) { @media (max-width: @small-screen) {
@ -129,9 +213,13 @@
.autogrid6 > *, .autogrid6 > *,
.autogrid8 > *, .autogrid8 > *,
.autogrid10 > *, .autogrid10 > *,
.autogrid12 > * {width: 49%} .autogrid12 > * {
width: 49%;
}
} }
@media (max-width: @tiny-screen) { @media (max-width: @tiny-screen) {
[class*="autogrid"] > * {width: 100%} [class*="autogrid"] > * {
width: 100%;
}
} }

View file

@ -12,18 +12,22 @@ table,
vertical-align: top; vertical-align: top;
border: 1px solid #ccc; border: 1px solid #ccc;
} }
.table { .table {
display: table; display: table;
} }
table#recaptcha_table, table#recaptcha_table,
table.table-auto { table.table-auto {
table-layout:auto; table-layout:auto;
} }
caption { caption {
padding: @small-value; padding: @small-value;
color: #555; color: #555;
font-style: italic; font-style: italic;
} }
td, td,
th { th {
padding: 0.3em 0.8em; padding: 0.3em 0.8em;

View file

@ -18,6 +18,7 @@ form,
fieldset { fieldset {
border: none; border: none;
} }
input, input,
button, button,
select, select,
@ -27,15 +28,18 @@ label,
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
} }
label { label {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
} }
legend { legend {
border: 0; border: 0;
white-space: normal; white-space: normal;
} }
textarea { textarea {
min-height: 5em; min-height: 5em;
vertical-align: top; vertical-align: top;
@ -43,13 +47,16 @@ textarea {
font-size: inherit; font-size: inherit;
resize: vertical; resize: vertical;
} }
/* clickable input types in iOS */
button, button,
input[type="button"], input[type="button"],
input[type="reset"], input[type="reset"],
input[type="submit"] { input[type="submit"] {
cursor: pointer; cursor: pointer;
-webkit-appearance: button; /* clickable input types in iOS */ -webkit-appearance: button;
} }
input[type="search"] { input[type="search"] {
-webkit-appearance: textfield; -webkit-appearance: textfield;
} }
@ -64,9 +71,11 @@ input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { input[type="search"]::-webkit-search-results-decoration {
display: none; display: none;
} }
::-webkit-input-placeholder { ::-webkit-input-placeholder {
color: #777; color: #777;
} }
input:-moz-placeholder, input:-moz-placeholder,
textarea:-moz-placeholder { textarea:-moz-placeholder {
color: #777; color: #777;

View file

@ -29,53 +29,65 @@
.icon.after:after { .icon.after:after {
margin: 0 0 0 8px; margin: 0 0 0 8px;
} }
.icon.after:before { .icon.after:before {
content: "" !important content: "" !important
} }
.icon-rate:before, .icon-rate:before,
.icon-rate.after:after { .icon-rate.after:after {
content: "\2605"; content: "\2605";
} }
.icon-unrate:before, .icon-unrate:before,
.icon-unrate.after:after{ .icon-unrate.after:after{
content: "\2606"; content: "\2606";
} }
.icon-check:before, .icon-check:before,
.icon-check.after:after{ .icon-check.after:after{
content: "\2713"; content: "\2713";
} }
.icon-uncheck:before, .icon-uncheck:before,
.icon-uncheck.after:after{ .icon-uncheck.after:after{
content: "\2717"; content: "\2717";
} }
.icon-cloud:before, .icon-cloud:before,
.icon-cloud.after:after { .icon-cloud.after:after {
content: "\2601"; content: "\2601";
} }
.icon-dl:before, .icon-dl:before,
.icon-dl.after:after { .icon-dl.after:after {
content: "\21E3"; content: "\21E3";
font-weight: bold; font-weight: bold;
} }
.icon-cross:before, .icon-cross:before,
.icon-cross.after:after { .icon-cross.after:after {
content: "\2716"; content: "\2716";
font-weight: bold; font-weight: bold;
} }
.icon-arrow1:before, .icon-arrow1:before,
.icon-arrow1.after:after { .icon-arrow1.after:after {
content: "\2192"; content: "\2192";
position: relative; position: relative;
top: -0.15em; top: -0.15em;
} }
.icon-arrow2:before, .icon-arrow2:before,
.icon-arrow2.after:after { .icon-arrow2.after:after {
content: "\279E"; content: "\279E";
} }
.icon-arrow3:before, .icon-arrow3:before,
.icon-arrow3.after:after { .icon-arrow3.after:after {
content: "\279A"; content: "\279A";
} }
.icon-bracket1:before, .icon-bracket1:before,
.icon-bracket1.after:after { .icon-bracket1.after:after {
content: "\2039"; content: "\2039";
@ -84,6 +96,7 @@
position: relative; position: relative;
top: -0.15em; top: -0.15em;
} }
.icon-bracket2:before, .icon-bracket2:before,
.icon-bracket2.after:after { .icon-bracket2.after:after {
content: "\203A"; content: "\203A";
@ -92,45 +105,54 @@
position: relative; position: relative;
top: -0.15em; top: -0.15em;
} }
.icon-up:before, .icon-up:before,
.icon-up.after:after { .icon-up.after:after {
content: "\25B2"; content: "\25B2";
} }
.icon-down:before, .icon-down:before,
.icon-down.after:after { .icon-down.after:after {
content: "\25BC"; content: "\25BC";
} }
.icon-bull:before, .icon-bull:before,
.icon-bull.after:after { .icon-bull.after:after {
content: "\2022"; content: "\2022";
font-size: 1.2em; font-size: 1.2em;
top: -0.05em; top: -0.05em;
} }
.icon-bull2:before, .icon-bull2:before,
.icon-bull2.after:after { .icon-bull2.after:after {
content: "\25E6"; content: "\25E6";
top: -0.05em; top: -0.05em;
} }
.icon-bull3:before, .icon-bull3:before,
.icon-bull3.after:after{ .icon-bull3.after:after{
content: "\2023"; content: "\2023";
font-size: 1.6em; font-size: 1.6em;
top: -0.05em; top: -0.05em;
} }
.icon-nav:before, .icon-nav:before,
.icon-nav.after:after { .icon-nav.after:after {
content: "\2261"; content: "\2261";
font-weight: bold; font-weight: bold;
} }
.icon-losange:before, .icon-losange:before,
.icon-losange.after:after { .icon-losange.after:after {
content: "\25C6"; content: "\25C6";
} }
.icon-asteri:before, .icon-asteri:before,
.icon-asteri.after:after { .icon-asteri.after:after {
content: "\2731"; content: "\2731";
font-weight: bold; font-weight: bold;
} }
.icon-mail:before, .icon-mail:before,
.icon-mail.after:after { .icon-mail.after:after {
content: "\2709"; content: "\2709";

View file

@ -6,6 +6,7 @@
@media (min-width: @small-screen) { @media (min-width: @small-screen) {
/* here go rules for big resources and big screens like: background-images, font-faces, etc. */ /* here go rules for big resources and big screens like: background-images, font-faces, etc. */
} }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
/* Style adjustments for retina devices */ /* Style adjustments for retina devices */
} }
@ -17,9 +18,18 @@
@media (min-width: @large-screen) { @media (min-width: @large-screen) {
/* layouts for large screens */ /* layouts for large screens */
.large-hidden { display: none !important; } .large-hidden {
.large-visible { display: block !important; } display: none !important;
.large-no-float {float: none; } }
.large-visible {
display: block !important;
}
.large-no-float {
float: none;
}
.large-inbl { .large-inbl {
display: inline-block; display: inline-block;
float: none; float: none;
@ -36,11 +46,26 @@
} }
/* widths for large screens */ /* widths for large screens */
.large-w25 { width: 25% !important; } .large-w25 {
.large-w33 { width: 33.3333% !important; } width: 25% !important;
.large-w50 { width: 50% !important; } }
.large-w66 { width: 66.6666% !important; }
.large-w75 { width: 75% !important; } .large-w33 {
width: 33.3333% !important;
}
.large-w50 {
width: 50% !important;
}
.large-w66 {
width: 66.6666% !important;
}
.large-w75 {
width: 75% !important;
}
.large-w100, .large-w100,
.large-wauto { .large-wauto {
display: block !important; display: block !important;
@ -53,7 +78,9 @@
} }
/* margins for large screens */ /* margins for large screens */
.large-man { margin: 0 !important; } .large-man {
margin: 0 !important;
}
} }
@media (max-width: @small-screen) { @media (max-width: @small-screen) {
@ -69,9 +96,18 @@
} }
/* layouts for small screens */ /* layouts for small screens */
.small-hidden { display: none !important; } .small-hidden {
.small-visible { display: block !important; } display: none !important;
.small-no-float {float: none; } }
.small-visible {
display: block !important;
}
.small-no-float {
float: none;
}
.small-inbl { .small-inbl {
display: inline-block; display: inline-block;
float: none; float: none;
@ -88,11 +124,26 @@
} }
/* widths for small screens */ /* widths for small screens */
.small-w25 { width: 25% !important; } .small-w25 {
.small-w33 { width: 33.3333% !important; } width: 25% !important;
.small-w50 { width: 50% !important; } }
.small-w66 { width: 66.6666% !important; }
.small-w75 { width: 75% !important; } .small-w33 {
width: 33.3333% !important;
}
.small-w50 {
width: 50% !important;
}
.small-w66 {
width: 66.6666% !important;
}
.small-w75 {
width: 75% !important;
}
.small-w100, .small-w100,
.small-wauto { .small-wauto {
display: block !important; display: block !important;
@ -103,9 +154,15 @@
margin-right: 0 !important; margin-right: 0 !important;
border: 0; border: 0;
} }
/* margins for small screens */ /* margins for small screens */
.small-man { margin: 0 !important; } .small-man {
.small-pan { padding: 0 !important; } margin: 0 !important;
}
.small-pan {
padding: 0 !important;
}
} }
@media (max-width: @tiny-screen) { @media (max-width: @tiny-screen) {
@ -122,49 +179,81 @@
margin-right: 0 !important; margin-right: 0 !important;
border: 0; border: 0;
} }
.w300p, .w300p,
.w400p, .w400p,
.w500p { .w500p {
width: auto; width: auto;
float: none; float: none;
} }
.row { .row {
display: block !important; display: block !important;
width: 100% !important; width: 100% !important;
} }
/* layouts for tiny screens */ /* layouts for tiny screens */
.tiny-hidden { display: none !important; } .tiny-hidden {
.tiny-visible { display: block !important; } display: none !important;
.tiny-no-float {float: none;} }
.tiny-visible {
display: block !important;
}
.tiny-no-float {
float: none;
}
.tiny-inbl { .tiny-inbl {
display: inline-block; display: inline-block;
float: none; float: none;
vertical-align: top; vertical-align: top;
} }
.tiny-row { .tiny-row {
display: table !important; display: table !important;
table-layout: fixed !important; table-layout: fixed !important;
width: 100% !important; width: 100% !important;
} }
.tiny-col { .tiny-col {
display: table-cell !important; display: table-cell !important;
vertical-align: top !important; vertical-align: top !important;
} }
th, th,
td { td {
display: block !important; display: block !important;
width: auto !important; width: auto !important;
text-align: left !important; text-align: left !important;
} }
thead { display: none; }
thead {
display: none;
}
/* widths for tiny screens */ /* widths for tiny screens */
.tiny-w25 { width: 25% !important; } .tiny-w25 {
.tiny-w33 { width: 33.3333% !important; } width: 25% !important;
.tiny-w50 { width: 50% !important; } }
.tiny-w66 { width: 66.6666% !important; }
.tiny-w75 { width: 75% !important; } .tiny-w33 {
width: 33.3333% !important;
}
.tiny-w50 {
width: 50% !important;
}
.tiny-w66 {
width: 66.6666% !important;
}
.tiny-w75 {
width: 75% !important;
}
.tiny-w100, .tiny-w100,
.tiny-wauto { .tiny-wauto {
display: block !important; display: block !important;
@ -175,7 +264,13 @@
margin-right: 0 !important; margin-right: 0 !important;
border: 0; border: 0;
} }
/* margins for tiny screens */ /* margins for tiny screens */
.tiny-man { margin: 0 !important; } .tiny-man {
.tiny-pan { padding: 0 !important; } margin: 0 !important;
}
.tiny-pan {
padding: 0 !important;
}
} }

View file

@ -4,21 +4,27 @@ Tutorial: http://knacss.com/demos/tutoriel.html#flex */
.flex { .flex {
display : flex; display : flex;
} }
.flex-h { .flex-h {
flex-direction: row; flex-direction: row;
} }
.flex-v { .flex-v {
flex-direction: column; flex-direction: column;
} }
.flex-fluid { .flex-fluid {
flex: 1; flex: 1;
} }
.flex-start { .flex-start {
order : -1; order : -1;
} }
.flex-mid { .flex-mid {
order : 1; order : 1;
} }
.flex-end { .flex-end {
order : 42; order : 42;
} }

View file

@ -1,11 +1,13 @@
@import "00-config"; @import "00-config";
/* quick print reset */ /* quick print reset */
@media print { @media print {
* { * {
background: transparent !important; background: transparent !important;
box-shadow: none !important; box-shadow: none !important;
text-shadow: none !important; text-shadow: none !important;
} }
body { body {
width: auto !important; width: auto !important;
margin: auto !important; margin: auto !important;
@ -14,6 +16,7 @@
background-color: #fff !important; background-color: #fff !important;
color: #333 !important; color: #333 !important;
} }
p, p,
h1, h1,
h2, h2,
@ -27,42 +30,56 @@
color: #000 !important; color: #000 !important;
margin: auto !important; margin: auto !important;
} }
.print { .print {
display: block; /* displaying .print elements */ display: block;
} }
.no-print {
display: none;
}
img { img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%); filter: grayscale(100%);
} }
/* no orphans, no widows */
p, p,
blockquote { blockquote {
orphans: 3; /* no orphans */ orphans: 3;
widows: 3; /* no widows */ widows: 3;
} }
/* no breaks inside these elements */
blockquote, blockquote,
ul, ul,
ol { ol {
page-break-inside: avoid; /* no breaks inside these elements */ page-break-inside: avoid;
} }
/* page break before main headers */
h1 { h1 {
page-break-before: always; /* page break before main headers */ page-break-before: always;
} }
/* no breaks after these elements */
h1, h1,
h2, h2,
h3, h3,
caption { caption {
page-break-after: avoid; /* no breaks after these elements */ page-break-after: avoid;
} }
a { a {
color: #000 !important; color: #000 !important;
text-decoration: underline !important; text-decoration: underline !important;
} }
/* displaying URLs */
a[href]:after { a[href]:after {
content: " (" attr(href) ")"; /* displaying URLs */ content: " (" attr(href) ")";
} }
a[href^="javascript:"]:after, a[href^="javascript:"]:after,
a[href^="#"]:after { a[href^="#"]:after {
content: ""; content: "";

View file

@ -27,7 +27,14 @@
& when (@enable-hyphens = true) { & when (@enable-hyphens = true) {
@media (max-width: @small-screen) { @media (max-width: @small-screen) {
/* you shall not pass */ /* you shall not pass */
div, textarea, table, td, th, code, pre, samp { div,
textarea,
table,
td,
th,
code,
pre,
samp {
word-wrap: break-word; word-wrap: break-word;
hyphens: auto; hyphens: auto;
} }

View file

@ -8,9 +8,11 @@
.gm-style img { .gm-style img {
height: 100%; height: 100%;
} }
:not(.gm-style) img { :not(.gm-style) img {
height: auto; height: auto;
} }
.gm-style img, .gm-style img,
.gmnoscreen img, .gmnoscreen img,
.gmnoprint img { .gmnoprint img {

View file

@ -9,29 +9,36 @@
@em: @h1-size * 10 / @base-font-size; @em: @h1-size * 10 / @base-font-size;
font-size: unit(round(@em,2), em); font-size: unit(round(@em,2), em);
} }
.ie678 h2, .ie678 .h2-like { .ie678 h2, .ie678 .h2-like {
@em: @h2-size * 10 / @base-font-size; @em: @h2-size * 10 / @base-font-size;
font-size: unit(round(@em,2), em); font-size: unit(round(@em,2), em);
} }
.ie678 h3, .ie678 .h3-like { .ie678 h3, .ie678 .h3-like {
@em: @h3-size * 10 / @base-font-size; @em: @h3-size * 10 / @base-font-size;
font-size: unit(round(@em,2), em); font-size: unit(round(@em,2), em);
} }
.ie678 h4, .ie678 .h4-like { .ie678 h4, .ie678 .h4-like {
@em: @h4-size * 10 / @base-font-size; @em: @h4-size * 10 / @base-font-size;
font-size: unit(round(@em,2), em); font-size: unit(round(@em,2), em);
} }
.ie678 h5, .ie678 .h5-like { .ie678 h5, .ie678 .h5-like {
@em: @h5-size * 10 / @base-font-size; @em: @h5-size * 10 / @base-font-size;
font-size: unit(round(@em,2), em); font-size: unit(round(@em,2), em);
} }
.ie678 h6, .ie678 .h6-like { .ie678 h6, .ie678 .h6-like {
@em: @h6-size * 10 / @base-font-size; @em: @h6-size * 10 / @base-font-size;
font-size: unit(round(@em,2), em); font-size: unit(round(@em,2), em);
} }
.ie678 img { .ie678 img {
width: auto; /* @bugfix for IE8 */ width: auto; /* @bugfix for IE8 */
} }
.ie678 .gm-style img { .ie678 .gm-style img {
height: 100%; height: 100%;
} }
@ -44,6 +51,7 @@
.col { .col {
*zoom: 1; *zoom: 1;
} }
/* inline-block and table-cell for IE6/IE7 */ /* inline-block and table-cell for IE6/IE7 */
/* warning: .col needs width on IE6/IE7 */ /* warning: .col needs width on IE6/IE7 */
.btn, .btn,
@ -52,6 +60,7 @@
*display: inline; *display: inline;
*zoom: 1; *zoom: 1;
} }
.visually-hidden { .visually-hidden {
*clip: rect(1px 1px 1px 1px); *clip: rect(1px 1px 1px 1px);
} }
@ -62,6 +71,7 @@
letter-spacing: -0.31em; letter-spacing: -0.31em;
text-rendering: optimizespeed; text-rendering: optimizespeed;
} }
.ie8 .grid > * > *, .ie8 .grid > * > *,
.ie8 [class*="autogrid"] > * > *{ .ie8 [class*="autogrid"] > * > *{
letter-spacing: normal; letter-spacing: normal;
@ -77,12 +87,15 @@
} }
/* forms */ /* forms */
/* Corrects excess space around these inputs in IE8/9 */
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] {
padding: 0; /* Corrects excess space around these inputs in IE8/9 */ padding: 0;
} }
/* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
textarea { textarea {
overflow: auto; /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */ overflow: auto;
} }
/* Active box-sizing for IE6/IE7 */ /* Active box-sizing for IE6/IE7 */

View file

@ -6,56 +6,70 @@
// Styling boolean // Styling boolean
& when (@enable-styling = true) { & when (@enable-styling = true) {
/* styling elements */ /* styling elements */
code, kbd, mark { code,
kbd,
mark {
border-radius: 2px; border-radius: 2px;
} }
kbd { kbd {
padding: 0 2px; padding: 0 2px;
border: 1px solid #999; border: 1px solid #999;
} }
code { code {
padding: 2px 4px; padding: 2px 4px;
background: rgba(0,0,0,0.04); background: rgba(0,0,0,0.04);
color: #b11; color: #b11;
} }
pre code { pre code {
padding: none; padding: none;
background: none; background: none;
color: inherit; color: inherit;
border-radius: 0; border-radius: 0;
} }
mark { mark {
padding:2px 4px; padding:2px 4px;
background: #ff0; background: #ff0;
} }
sup, sup,
sub { sub {
vertical-align: 0; vertical-align: 0;
position: relative; position: relative;
} }
sup { sup {
bottom: 1ex; bottom: 1ex;
} }
sub { sub {
top: 0.5ex; top: 0.5ex;
} }
blockquote { blockquote {
margin-left: 0; margin-left: 0;
padding-left: 1em; padding-left: 1em;
border-left: 4px solid rgba(0,0,0,0.15); border-left: 4px solid rgba(0,0,0,0.15);
font-style: italic; font-style: italic;
} }
q { q {
font-style: normal; font-style: normal;
} }
q, q,
.q { .q {
quotes: "“\00a0" "\00a0”"; quotes: "“\00a0" "\00a0”";
} }
q:lang(fr), q:lang(fr),
.q:lang(fr) { .q:lang(fr) {
quotes: "«\00a0" "\00a0»"; quotes: "«\00a0" "\00a0»";
} }
hr { hr {
display: block; display: block;
clear: both; clear: both;
@ -66,14 +80,17 @@
color: #ccc; color: #ccc;
background-color: #ccc; background-color: #ccc;
} }
/* alternate tables */ /* alternate tables */
.alternate { border: 0; } .alternate { border: 0; }
.alternate tbody { .alternate tbody {
border: 1px solid #ccc; border: 1px solid #ccc;
} }
.alternate thead tr > * + * { .alternate thead tr > * + * {
border-left: 0; border-left: 0;
} }
.alternate tbody tr > * + * { .alternate tbody tr > * + * {
border-left: 1px solid #ccc; border-left: 1px solid #ccc;
} }
@ -83,9 +100,11 @@
border: 0; border: 0;
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
} }
.alternate-vert tr > :first-child { .alternate-vert tr > :first-child {
border-bottom: 0; border-bottom: 0;
} }
.alternate-vert tr > * + * { .alternate-vert tr > * + * {
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
} }