From 8e3c6aa61e39e344bb7d6a92aa5a0200aee3841f Mon Sep 17 00:00:00 2001 From: Raphael Goetter Date: Fri, 31 Jan 2014 15:30:55 +0100 Subject: [PATCH] version 2.9.3 prise en compte https://github.com/raphaelgoetter/KNACSS/pull/46 --- bower.json | 2 +- css/01-base.css | 897 ++++++++++ css/02-grids.css | 126 ++ css/03-tables.css | 98 + css/{forms.css => 04-forms.css} | 75 +- css/05-icons.css | 165 ++ css/06-rwd.css | 301 ++++ css/07-flexbox.css | 71 + css/08-print.css | 89 + css/flexbox.css | 65 - css/grids.css | 77 - css/icons.css | 139 -- css/knacss.css | 1878 +++++++++++++++++--- css/rwd.css | 214 --- css/tables.css | 78 - less/{_00-config.less => 00-config.less} | 0 less/{_01-base.less => 01-base.less} | 8 +- less/{_02-grids.less => 02-grids.less} | 2 +- less/{_03-tables.less => 03-tables.less} | 2 +- less/{_04-forms.less => 04-forms.less} | 2 +- less/{_05-icons.less => 05-icons.less} | 2 +- less/{_06-rwd.less => 06-rwd.less} | 45 +- less/{_07-flexbox.less => 07-flexbox.less} | 7 +- css/print.css => less/08-print.less | 1 + less/_08-print.less | 69 - less/knackLESS.zip | Bin 9249 -> 9378 bytes less/knacss.less | 23 +- 27 files changed, 3469 insertions(+), 967 deletions(-) create mode 100644 css/01-base.css create mode 100644 css/02-grids.css create mode 100644 css/03-tables.css rename css/{forms.css => 04-forms.css} (60%) create mode 100644 css/05-icons.css create mode 100644 css/06-rwd.css create mode 100644 css/07-flexbox.css create mode 100644 css/08-print.css delete mode 100644 css/flexbox.css delete mode 100644 css/grids.css delete mode 100644 css/icons.css delete mode 100644 css/rwd.css delete mode 100644 css/tables.css rename less/{_00-config.less => 00-config.less} (100%) rename less/{_01-base.less => 01-base.less} (97%) rename less/{_02-grids.less => 02-grids.less} (98%) rename less/{_03-tables.less => 03-tables.less} (98%) rename less/{_04-forms.less => 04-forms.less} (98%) rename less/{_05-icons.less => 05-icons.less} (99%) rename less/{_06-rwd.less => 06-rwd.less} (85%) rename less/{_07-flexbox.less => 07-flexbox.less} (88%) rename css/print.css => less/08-print.less (98%) delete mode 100644 less/_08-print.less diff --git a/bower.json b/bower.json index 39e87cf..6435907 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "KNACSS", - "version": "2.9.2", + "version": "2.9.3", "homepage": "http://www.knacss.com/", "authors": [ "Raphaël GOETTER, Alsacreations" diff --git a/css/01-base.css b/css/01-base.css new file mode 100644 index 0000000..b293cca --- /dev/null +++ b/css/01-base.css @@ -0,0 +1,897 @@ +/*! +* www.KNACSS.com V2.9.3 (2014-02) @author: Raphael Goetter, Alsacreations +* Licence WTFPL http://www.wtfpl.net/ +*/ + +/* ----------------------------- */ + +/* == soft reset */ + +/* ----------------------------- */ + +/* switching box model for all elements */ + +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* soft reset */ + +html, +body { + margin: 0; + padding: 0; +} + +ul, +ol { + padding-left: 2em; +} + +ul.unstyled { + list-style: none; +} + +img { + vertical-align: middle; + border: 0; +} + +audio, +canvas, +video { + display: inline-block; +} + +svg:not(:root) { + overflow: hidden; +} + +figure { + margin: 0; +} + +/* ----------------------------- */ + +/* == typography */ + +/* ----------------------------- */ + +/* base font-size corresponds to 10px and is adapted to rem unit */ + +html { + font-size: 62.5%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +body { + background-color: #ffffff; + color: #000000; + font-family: Helvetica, Arial, sans-serif; + font-size: 1.4em; + line-height: 1.5; +} + +/* font-sizing for content */ + +/* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */ + +p, +ul, +ol, +dl, +blockquote, +pre, +td, +th, +label, +textarea, +caption, +details, +figure, +hgroup { + margin-top: .75em; + margin-bottom: 0; + line-height: 1.5; +} + +h1, +.h1-like { + margin-top: 0.65625em; + margin-bottom: 0; + font-size: 3.2rem; + line-height: 1.3125; +} + +h2, +.h2-like { + margin-top: 0.75em; + margin-bottom: 0; + font-size: 2.8rem; + line-height: 1.5; +} + +h3, +.h3-like { + margin-top: 0.875em; + margin-bottom: 0; + font-size: 2.4rem; + line-height: 1.75; +} + +h4, +.h4-like { + margin-top: 1.05em; + margin-bottom: 0; + font-size: 2rem; + line-height: 1.05; +} + +h5, +.h5-like { + margin-top: 1.1666666666666667em; + margin-bottom: 0; + font-size: 1.8rem; + line-height: 1.1666666666666667; +} + +h6, +.h6-like { + margin-top: 1.3125em; + margin-bottom: 0; + font-size: 1.6rem; + line-height: 1.3125; +} + +/* alternate font-sizing */ + +.smaller { + font-size: 0.7142857142857143em; +} + +.small { + font-size: 0.8571428571428571em; +} + +.big { + font-size: 1.1428571428571428em; +} + +.bigger { + font-size: 1.2857142857142858em; +} + +.biggest { + font-size: 1.4285714285714286em; +} + +code, +pre, +samp, +kbd { + white-space: pre-line; + /* IE fix */ + white-space: pre-wrap; + font-family: Consolas, 'DejaVu Sans Mono', Courier, monospace; + line-height: 1; +} + +code, +kbd, +mark { + border-radius: 2px; +} + +em { + font-style: italic; +} + +strong { + font-weight: bold; +} + +kbd { + padding: 0 2px; + border: 1px solid #999; +} + +code { + padding: 2px 4px; + background: rgba(0, 0, 0, 0.04); + color: #b11; +} + +mark { + padding: 2px 4px; + background: #ff0; +} + +sup, +sub { + vertical-align: 0; + position: relative; +} + +sup { + bottom: 1ex; +} + +sub { + top: .5ex; +} + +/* ----------------------------- */ + +/* == hiding content */ + +/* ----------------------------- */ + +/* hiding content */ + +.visually-hidden { + position: absolute; + left: -7000px; + overflow: hidden; +} + +[dir=rtl] .visually-hidden { + left: auto; + right: -7000px; +} + +.desktop-hidden { + display: none; +} + +/* hidden on desktop */ + +/* ----------------------------- */ + +/* == skip links styling */ + +/* ----------------------------- */ + +.skip-links { + position: absolute; +} + +.skip-links a { + position: absolute; + left: -7000px; + padding: 0.5em; + background: black; + color: white; + text-decoration: none; +} + +.skip-links a:focus { + position: static; +} + +/* ----------------------------- */ + +/* == browsers consistency */ + +/* ----------------------------- */ + +/* avoid top margins on first content element */ + +p:first-child, +ul:first-child, +ol:first-child, +dl:first-child, +blockquote:first-child, +pre:first-child, +h1:first-child, +h2:first-child, +h3:first-child, +h4:first-child, +h5:first-child, +h6:first-child { + margin-top: 0; +} + +/* avoid margins on nested elements */ + +li p, +li ul, +li ol { + margin-top: 0; + margin-bottom: 0; +} + +/* max values */ + +img, +table, +td, +blockquote, +code, +pre, +textarea, +input, +video { + max-width: 100%; +} + +/* margin-bottom on tables */ + +table { + margin-bottom: 1.5em; +} + +/* Google Gmap3 bug fix on images */ + +:not(.gm-style) img { + height: auto !important; +} + +.ie678 .gm-style img { + height: 100%; + /* IE678 hack */ +} + +.gm-style img, +.gmnoscreen img, +.gmnoprint img { + max-width: none !important; +} + +/* scripts */ + +body > script { + display: none !important; +} + +/* ----------------------------- */ + +/* ==layout and modules */ + +/* ----------------------------- */ + +/* float layout */ + +/* module, gains superpower "BFC" Block Formating Context */ + +.mod { + overflow: hidden; +} + +/* blocks that needs to be placed under floats */ + +.clear, +.line, +.row { + clear: both; +} + +/* blocks that must contain floats */ + +.clearfix:after, +.line:after, +.mod:after { + content: ""; + display: table; + clear: both; +} + +/* table layout */ + +.row { + display: table; + table-layout: fixed; + width: 100%; +} + +.row > *, +.col { + display: table-cell; + vertical-align: top; +} + +/* inline-block */ + +.inbl { + display: inline-block; + vertical-align: top; +} + +/* alignments (blocks and inline) */ + +/* ------------------------------ */ + +/* left elements */ + +.left { + float: left; +} + +img.left { + margin-right: 1em; +} + +/* right elements */ + +.right { + float: right; +} + +img.right { + margin-left: 1em; +} + +img.left, +img.right { + margin-bottom: 5px; +} + +.center { + margin-left: auto; + margin-right: auto; +} + +.txtleft { + text-align: left; +} + +.txtright { + text-align: right; +} + +.txtcenter { + text-align: center; +} + +/* ----------------------------- */ + +/* == width helpers */ + +/* .. use only when needed */ + +/* ----------------------------- */ + +/* blocks widths (percentage and pixels) */ + +.w10 { + width: 10%; +} + +.w20 { + width: 20%; +} + +.w25 { + width: 25%; +} + +.w30 { + 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; +} + +/* ----------------------------- */ + +/* == spacing helpers */ + +/* .. use only when needed */ + +/* ----------------------------- */ + +/* spacing helpers +p,m = padding,margin +a,t,r,b,l = all,top,right,bottom,left +s,m,l,n = small(10px),medium(20px),large(30px),none(0) +source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css +*/ + +.m-reset, +.ma0 { + margin: 0; +} + +.p-reset, +.pa0 { + padding: 0; +} + +.ma1, +.mas { + margin: 10px; +} + +.ma2, +.mam { + margin: 20px; +} + +.ma3, +.mal { + margin: 30px; +} + +.pa1, +.pas { + padding: 10px; +} + +.pa2, +.pam { + padding: 20px; +} + +.pa3, +.pal { + padding: 30px; +} + +.mt0, +.mtn { + margin-top: 0; +} + +.mt1, +.mts { + margin-top: 10px; +} + +.mt2, +.mtm { + margin-top: 20px; +} + +.mt3, +.mtl { + margin-top: 30px; +} + +.mr0, +.mrn { + margin-right: 0; +} + +.mr1, +.mrs { + margin-right: 10px; +} + +.mr2, +.mrm { + margin-right: 20px; +} + +.mr3, +.mrl { + margin-right: 30px; +} + +.mb0, +.mbn { + margin-bottom: 0; +} + +.mb1, +.mbs { + margin-bottom: 10px; +} + +.mb2, +.mbm { + margin-bottom: 20px; +} + +.mb3, +.mbl { + margin-bottom: 30px; +} + +.ml0, +.mln { + margin-left: 0; +} + +.ml1, +.mls { + margin-left: 10px; +} + +.ml2, +.mlm { + margin-left: 20px; +} + +.ml3, +.mll { + margin-left: 30px; +} + +.pt0, +.ptn { + padding-top: 0; +} + +.pt1, +.pts { + padding-top: 10px; +} + +.pt2, +.ptm { + padding-top: 20px; +} + +.pt3, +.ptl { + padding-top: 30px; +} + +.pr0, +.prn { + padding-right: 0; +} + +.pr1, +.prs { + padding-right: 10px; +} + +.pr2, +.prm { + padding-right: 20px; +} + +.pr3, +.prl { + padding-right: 30px; +} + +.pb0, +.pbn { + padding-bottom: 0; +} + +.pb1, +.pbs { + padding-bottom: 10px; +} + +.pb2, +.pbm { + padding-bottom: 20px; +} + +.pb3, +.pbl { + padding-bottom: 30px; +} + +.pl0, +.pln { + padding-left: 0; +} + +.pl1, +.pls { + padding-left: 10px; +} + +.pl2, +.plm { + padding-left: 20px; +} + +.pl3, +.pll { + padding-left: 30px; +} + +/* ----------------------------- */ + +/* == iefix */ + +/* ----------------------------- */ + +/* Make sure you are using Conditional Classes in your HTML */ + +/* see : http://www.alsacreations.com/astuce/lire/988-classes-conditionnelles-HTML.html */ + +.ie678 h1, +.ie678 .h1-like { + font-size: 2.2857142857142856em; +} + +.ie678 h2, +.ie678 .h2-like { + font-size: 2em; +} + +.ie678 h3, +.ie678 .h3-like { + font-size: 1.7142857142857142em; +} + +.ie678 h4, +.ie678 .h4-like { + font-size: 1.4285714285714286em; +} + +.ie678 h5, +.ie678 .h5-like { + font-size: 1.2857142857142858em; +} + +.ie678 h6, +.ie678 .h6-like { + font-size: 1.1428571428571428em; +} + +/* hasLayout for IE6/IE7 */ + +.ie67 .clearfix, +.ie67 .line, +.ie67 .mod, +.ie67 .row, +.ie67 .col { + zoom: 1; +} + +/* inline-block and table-cell for IE6/IE7 */ + +/* warning: .col needs width on IE6/IE7 */ + +.ie67 .btn, +.ie67 .col, +.ie67 .inbl { + display: inline; + zoom: 1; +} + +.ie8 img { + width: auto; + /* @bugfix for IE8 */ +} + +/* Active box-sizing for IE6/IE7 */ + +/* @source https://github.com/Schepp/box-sizing-polyfill */ + +/* +.ie67 * { + behavior: url(/lib/box-sizing-polyfill/boxsizing.htc); +} +*/ + +/* ----------------------------- */ + +/* == quick print reset */ + +/* ----------------------------- */ + +@media print { + p, + blockquote { + orphans: 2; + widows: 2; + } + + blockquote, + ul, + ol { + page-break-inside: avoid; + } + + h1, + h2, + h3, + caption { + page-break-after: avoid; + } +} + +/* debug helper */ + +.knacss-debug { + background: pink; + outline: 3px solid maroon; +} \ No newline at end of file diff --git a/css/02-grids.css b/css/02-grids.css new file mode 100644 index 0000000..6ed6c98 --- /dev/null +++ b/css/02-grids.css @@ -0,0 +1,126 @@ +/* grids inspired from SUIT https://github.com/suitcss/suit */ + +/* font-family hack explained here : https://github.com/raphaelgoetter/KNACSS/issues/37 */ + +.grid { + overflow: hidden; + font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; +} + +.grid > * { + display: block; + padding: 0; + margin-left: -20px; + /* gutter value */ + text-align: left; + letter-spacing: -0.31em; + text-rendering: optimizespeed; +} + +/* Opera hack */ + +.opera:-o-prefocus, +.grid > * { + word-spacing: -0.43em; +} + +.grid > * > * { + display: inline-block; + width: 100%; + padding-left: 20px; + /* gutter value */ + margin-left: 0; + vertical-align: top; + text-align: left; + letter-spacing: normal; + word-spacing: normal; + text-rendering: auto; + *display: inline; + *zoom: 1; + /* IE67 hack */ + font-family: Helvetica, Arial, sans-serif; +} + +.grid2 > * { + width: 50%; +} + +.grid3 > * { + width: 33.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 */ + +.grid2-1 > *:first-child, +.grid1-2 > * + * { + width: 66.666%; +} + +.grid1-2 > *:first-child, +.grid2-1 > * + * { + width: 33.333%; +} + +.grid1-3 > *:first-child, +.grid3-1 > * + * { + width: 25%; +} + +.grid3-1 > *:first-child, +.grid1-3 > * + * { + width: 75%; +} + +/* Responsiv-o-matic */ + +@media (max-width: 1280px) { + .grid5 > *, + .grid6 > *, + .grid8 > *, + .grid10 > *, + .grid12 > * { + width: 33.333%; + } +} + +@media (max-width: 768px) { + .grid3 > *, + .grid4 > *, + .grid5 > *, + .grid6 > *, + .grid8 > *, + .grid10 > *, + .grid12 > * { + width: 50%; + } +} + +@media (max-width: 480px) { + .grid > * > * { + width: 100% !important; + } +} \ No newline at end of file diff --git a/css/03-tables.css b/css/03-tables.css new file mode 100644 index 0000000..1e65691 --- /dev/null +++ b/css/03-tables.css @@ -0,0 +1,98 @@ +/* ----------------------------- */ + +/* ==tables */ + +/* ----------------------------- */ + +table, +.table { + max-width: 100%; + table-layout: fixed; + border-collapse: collapse; + vertical-align: top; +} + +table { + width: 100%; +} + +.table { + display: table; +} + +table#recaptcha_table, +table.table-auto { + table-layout: auto; +} + +caption { + padding: 10px; + color: #555; + font-style: italic; +} + +table { + border: 1px solid #ccc; +} + +tr > * + * { + border-left: 1px solid #ccc; +} + +th, +td { + padding: .3em .8em; + text-align: left; + border-bottom: 1px solid #ccc; +} + +td { + color: #333; +} + +/* alternate tables */ + +.alternate { + border: 0; +} + +.alternate tbody { + border: 1px solid #ccc; +} + +.alternate thead tr > * + * { + border-left: 0; +} + +.alternate tbody tr > * + * { + border-left: 1px solid #ccc; +} + +/* alternate-vert tables */ + +.alternate-vert { + border: 0; + border-right: 1px solid #ccc; +} + +.alternate-vert tr > :first-child { + border-bottom: 0; +} + +.alternate-vert tr > * + * { + border-top: 1px solid #ccc; +} + +/* striped tables */ + +.striped tbody tr:nth-child(odd) { + background: #eee; + background: rgba(0, 0, 0, 0.05); +} + +/* striped-vert tables */ + +.striped-vert tr > :first-child { + background: #eee; + background: rgba(0, 0, 0, 0.05); +} \ No newline at end of file diff --git a/css/forms.css b/css/04-forms.css similarity index 60% rename from css/forms.css rename to css/04-forms.css index 6440ca0..3ae235c 100644 --- a/css/forms.css +++ b/css/04-forms.css @@ -1,6 +1,7 @@ - /* ----------------------------- */ + /* ==forms */ + /* ----------------------------- */ /* thanks to HTML5boilerplate, @@ -8,81 +9,95 @@ * and www.sitepen.com */ - /* buttons */ + .btn { - display: inline-block; + display: inline-block; } /* forms items */ + form, fieldset { - border: none; + border: none; } + input, button, select, label, .btn { - vertical-align: middle; - font-family: inherit; - font-size: inherit; + vertical-align: middle; + font-family: inherit; + font-size: inherit; } -label { - display: inline-block; - vertical-align: middle; - cursor: pointer; + +label { + display: inline-block; + vertical-align: middle; + cursor: pointer; } + legend { - border: 0; - white-space: normal; + border: 0; + white-space: normal; } + textarea { - overflow: auto; /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */ - min-height: 5em; - vertical-align: top; - font-family: inherit; - font-size: inherit; - resize: vertical; + overflow: auto; + /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */ + min-height: 5em; + vertical-align: top; + font-family: inherit; + font-size: inherit; + resize: vertical; } + button, input[type="button"], input[type="reset"], input[type="submit"] { - cursor: pointer; - -webkit-appearance: button; /* clickable input types in iOS */ + cursor: pointer; + -webkit-appearance: button; + /* clickable input types in iOS */ } + input[type="checkbox"], input[type="radio"] { - padding: 0; /* Corrects excess space around these inputs in IE8/9 */ + padding: 0; + /* Corrects excess space around these inputs in IE8/9 */ } + input[type="search"] { - -webkit-appearance: textfield; + -webkit-appearance: textfield; } /* if select styling bugs on WebKit */ -/* select { -webkit-appearance: none; } */ /* 'x' appears on right of search input when text is entered. This removes it */ + input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { - display: none; + display: none; } + ::-webkit-input-placeholder { - color: #777; + color: #777; } + input:-moz-placeholder, textarea:-moz-placeholder { - color: #777; + color: #777; } /* Removes inner padding and border in FF3+ */ + button::-moz-focus-inner, input[type='button']::-moz-focus-inner, input[type='reset']::-moz-focus-inner, input[type='submit']::-moz-focus-inner { - border: 0; - padding: 0; -} + border: 0; + padding: 0; +} \ No newline at end of file diff --git a/css/05-icons.css b/css/05-icons.css new file mode 100644 index 0000000..c206df6 --- /dev/null +++ b/css/05-icons.css @@ -0,0 +1,165 @@ +/* ----------------------------- */ + +/* ==icons and bullets */ + +/* ----------------------------- */ + +.icon { + display: inline-block; +} + +.icon:before, +.icon.after:after { + content: ""; + display: inline-block; + vertical-align: middle; + position: relative; + top: -0.1em; + margin: 0 0.3em 0 0; + font: 1.4em/1 sans-serif; + color: #000; + text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1); + speak: none; +} + +@media (min-device-width: 768px) { + .icon:before, + .icon.after:after { + font: 1em/0.6 sans-serif; + -webkit-transform: rotateZ(0.05deg); + } +} + +.icon.after:after { + margin: 0 0 0 8px; +} + +.icon.after:before { + content: "" !important; +} + +.icon-rate:before, +.icon-rate.after:after { + content: "\2605"; +} + +.icon-unrate:before, +.icon-unrate.after:after { + content: "\2606"; +} + +.icon-check:before, +.icon-check.after:after { + content: "\2713"; +} + +.icon-uncheck:before, +.icon-uncheck.after:after { + content: "\2717"; +} + +.icon-cloud:before, +.icon-cloud.after:after { + content: "\2601"; +} + +.icon-dl:before, +.icon-dl.after:after { + content: "\21E3"; + font-weight: bold; +} + +.icon-cross:before, +.icon-cross.after:after { + content: "\2716"; + font-weight: bold; +} + +.icon-arrow1:before, +.icon-arrow1.after:after { + content: "\2192"; + position: relative; + top: -0.15em; +} + +.icon-arrow2:before, +.icon-arrow2.after:after { + content: "\279E"; +} + +.icon-arrow3:before, +.icon-arrow3.after:after { + content: "\279A"; +} + +.icon-bracket1:before, +.icon-bracket1.after:after { + content: "\2039"; + font-weight: bold; + font-size: 1.6em; + position: relative; + top: -0.15em; +} + +.icon-bracket2:before, +.icon-bracket2.after:after { + content: "\203A"; + font-weight: bold; + font-size: 1.6em; + position: relative; + top: -0.15em; +} + +.icon-up:before, +.icon-up.after:after { + content: "\25B2"; +} + +.icon-down:before, +.icon-down.after:after { + content: "\25BC"; +} + +.icon-bull:before, +.icon-bull.after:after { + content: "\2022"; + font-size: 1.2em; + top: -0.05em; +} + +.icon-bull2:before, +.icon-bull2.after:after { + content: "\25E6"; + top: -0.05em; +} + +.icon-bull3:before, +.icon-bull3.after:after { + content: "\2023"; + font-size: 1.6em; + top: -0.05em; +} + +.icon-nav:before, +.icon-nav.after:after { + content: "\2261"; + font-weight: bold; +} + +.icon-losange:before, +.icon-losange.after:after { + content: "\25C6"; +} + +.icon-asteri:before, +.icon-asteri.after:after { + content: "\2731"; + font-weight: bold; +} + +.icon-mail:before, +.icon-mail.after:after { + content: "\2709"; + font-size: 1.6em; + top: -0.05em; +} \ No newline at end of file diff --git a/css/06-rwd.css b/css/06-rwd.css new file mode 100644 index 0000000..aabac73 --- /dev/null +++ b/css/06-rwd.css @@ -0,0 +1,301 @@ +/* ----------------------------- */ + +/* ==desktop and retina medias */ + +/* ----------------------------- */ + +@media (min-width: 768px) { + /* 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) { + /* Style adjustments for retina devices */ +} + +/* ---------------------------------- */ + +/* ==Responsive large / medium / tiny */ + +/* ---------------------------------- */ + +@media (min-width: 1280px) { + /* layouts for large screens */ + + .large-hidden { + display: none !important; + } + + .large-visible { + display: block !important; + } + + .large-no-float { + float: none; + } + + .large-inbl { + display: inline-block; + float: none; + vertical-align: top; + } + + .large-row { + display: table; + table-layout: fixed; + width: 100% !important; + } + + .large-col { + display: table-cell; + vertical-align: top; + } + + /* widths for large screens */ + + .large-w25 { + width: 25% !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-wauto { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + + /* margins for large screens */ + + .large-ma0 { + margin: 0 !important; + } +} + +@media (max-width: 768px) { + /* quick reset in small resolution and less */ + + .w600p, + .w700p, + .w800p, + .w960p, + .mw960p { + width: auto; + float: none; + } + + /* layouts for small screens */ + + .small-hidden { + display: none !important; + } + + .small-visible { + display: block !important; + } + + .small-no-float { + float: none; + } + + .small-inbl { + display: inline-block; + float: none; + vertical-align: top; + } + + .small-row { + display: table !important; + table-layout: fixed !important; + width: 100% !important; + } + + .small-col { + display: table-cell !important; + vertical-align: top !important; + } + + /* you shall not pass */ + + div, + textarea, + table, + td, + th, + code, + pre, + samp { + word-wrap: break-word; + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + -o-hyphens: auto; + hyphens: auto; + } + + /* widths for small screens */ + + .small-w25 { + width: 25% !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-wauto { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + + /* margins for small screens */ + + .small-ma0 { + margin: 0 !important; + } +} + +@media (max-width: 480px) { + /* quick tiny resolution reset */ + + .mod, + .col, + fieldset { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + + .w300p, + .w400p, + .w500p { + width: auto; + float: none; + } + + .row { + display: block !important; + width: 100% !important; + } + + /* layouts for tiny screens */ + + .tiny-hidden { + display: none !important; + } + + .tiny-visible { + display: block !important; + } + + .tiny-no-float { + float: none; + } + + .tiny-inbl { + display: inline-block; + float: none; + vertical-align: top; + } + + .tiny-row { + display: table !important; + table-layout: fixed !important; + width: 100% !important; + } + + .tiny-col { + display: table-cell !important; + vertical-align: top !important; + } + + th, + td { + display: block !important; + width: auto !important; + text-align: left !important; + } + + thead { + display: none; + } + + /* widths for tiny screens */ + + .tiny-w25 { + width: 25% !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-wauto { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + + /* margins for tiny screens */ + + .tiny-ma0 { + margin: 0 !important; + } +} \ No newline at end of file diff --git a/css/07-flexbox.css b/css/07-flexbox.css new file mode 100644 index 0000000..6b51794 --- /dev/null +++ b/css/07-flexbox.css @@ -0,0 +1,71 @@ +/* flexbox layout +Tutorial: http://knacss.com/demos/tutoriel.html#flex */ + +.flex { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; +} + +.flex-h { + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + -webkit-box-direction: normal; + -moz-box-direction: normal; + flex-direction: row; +} + +.flex-v { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + -webkit-box-direction: normal; + -moz-box-direction: normal; + flex-direction: column; +} + +.flex-fluid { + -moz-box-flex: 1; + -webkit-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + -webkit-box-flex: 1; + flex: 1; +} + +.flex-start { + -webkit-box-ordinal-group: -1; + -moz-box-ordinal-group: 0; + -ms-flex-order: -1; + -webkit-order: -1; + -moz-order: -1; + -webkit-box-ordinal-group: 0; + order: -1; +} + +.flex-mid { + -webkit-box-ordinal-group: 1; + -moz-box-ordinal-group: 1; + -ms-flex-order: 1; + -webkit-order: 1; + -moz-order: 1; + -webkit-box-ordinal-group: 2; + -moz-box-ordinal-group: 2; + order: 1; +} + +.flex-end { + -webkit-box-ordinal-group: 42; + -moz-box-ordinal-group: 42; + -ms-flex-order: 42; + -webkit-order: 42; + -moz-order: 42; + -webkit-box-ordinal-group: 43; + -moz-box-ordinal-group: 43; + order: 42; +} \ No newline at end of file diff --git a/css/08-print.css b/css/08-print.css new file mode 100644 index 0000000..51928d5 --- /dev/null +++ b/css/08-print.css @@ -0,0 +1,89 @@ +/* quick print reset */ + +@media print { + * { + background: transparent !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + text-shadow: none !important; + } + + body { + width: auto !important; + margin: auto !important; + font-family: serif; + font-size: 12pt; + background-color: #fff !important; + color: #333 !important; + } + + p, + h1, + h2, + h3, + h4, + h5, + h6, + blockquote, + ul, + ol { + color: #000 !important; + margin: auto !important; + } + + .print { + display: block; + /* displaying .print elements */ + } + + img { + -webkit-filter: grayscale(100%); + -moz-filter: grayscale(100%); + -ms-filter: grayscale(100%); + -o-filter: grayscale(100%); + filter: grayscale(100%); + } + + p, + blockquote { + orphans: 3; + /* no orphans */ + widows: 3; + /* no widows */ + } + + blockquote, + ul, + ol { + page-break-inside: avoid; + /* no breaks inside these elements */ + } + + h1 { + page-break-before: always; + /* page break before main headers */ + } + + h1, + h2, + h3, + caption { + page-break-after: avoid; + /* no breaks after these elements */ + } + + a { + color: #000 !important; + text-decoration: underline !important; + } + + a[href]:after { + content: " (" attr(href) ")"; + /* displaying URLs */ + } + + a[href^="javascript:"]:after, + a[href^="#"]:after { + content: ""; + } +} \ No newline at end of file diff --git a/css/flexbox.css b/css/flexbox.css deleted file mode 100644 index 3904d6c..0000000 --- a/css/flexbox.css +++ /dev/null @@ -1,65 +0,0 @@ - - -/* ----------------------------- */ -/* ==flexbox classes */ -/* ----------------------------- */ - -/* flexbox layout context on container */ -.flex { - display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; - display: -webkit-flex; - display: flex; -} -/* horizontal alignment */ -.flex-h { - -webkit-box-orient: horizontal; - -moz-box-orient: horizontal; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; -} -/* vertical alignment */ -.flex-v { - -webkit-box-orient: vertical; - -moz-box-orient: vertical; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} -/* for fluid items */ -.flex-fluid { - -moz-box-flex: 1; - -webkit-flex: 1; - -moz-flex: 1; - -ms-flex: 1; - flex: 1; -} -/* for items that must appear first */ -.flex-start { - -webkit-box-ordinal-group: -1; - -moz-box-ordinal-group: 0; - -ms-flex-order: -1; - -webkit-order: -1; - -moz-order: -1; - order: -1; -} -/* for items that must appear middle */ -.flex-mid { - -webkit-box-ordinal-group: 1; - -moz-box-ordinal-group: 1; - -ms-flex-order: 1; - -webkit-order: 1; - -moz-order: 1; - order: 1; -} -/* for items that must appear at the end */ -.flex-end { - -webkit-box-ordinal-group: 42; - -moz-box-ordinal-group: 42; - -ms-flex-order: 42; - -webkit-order: 42; - -moz-order: 42; - order: 42; -} diff --git a/css/grids.css b/css/grids.css deleted file mode 100644 index f09b96b..0000000 --- a/css/grids.css +++ /dev/null @@ -1,77 +0,0 @@ - -/* ----------------------------- */ -/* ==grids */ -/* ----------------------------- */ - -/* grids inspired from SUIT https://github.com/suitcss/suit */ -/* font-family hack explained here : https://github.com/raphaelgoetter/KNACSS/issues/37 */ - -.grid { - overflow: hidden; - font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; -} -.grid > * { - display: block; - padding: 0; - margin-left: -20px; /* gutter value */ - text-align: left; - letter-spacing: -0.31em; - text-rendering: optimizespeed; -} -/* Opera hack */ -.opera:-o-prefocus, -.grid > * { - word-spacing: -0.43em; -} -.grid > * > * { - display: inline-block; - width: 100%; - padding-left: 20px; /* gutter value */ - margin-left: 0; - vertical-align: top; - text-align: left; - letter-spacing: normal; - word-spacing: normal; - text-rendering: auto; - *display: inline; *zoom: 1; /* IE67 hack */ - font-family: helvetica, arial, sans-serif; -} -.grid2 > * {width: 50%;} -.grid3 > * {width: 33.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 */ -.grid2-1 > *:first-child, -.grid1-2 > * + * { width: 66.666%; } -.grid1-2 > *:first-child, -.grid2-1 > * + * { width: 33.333%; } -.grid1-3 > *:first-child, -.grid3-1 > * + * { width: 25%; } -.grid3-1 > *:first-child, -.grid1-3 > * + * { width: 75%; } - -/* Responsiv-o-matic */ -@media (max-width: 1024px) { - .grid5 > *, - .grid6 > *, - .grid8 > *, - .grid10 > *, - .grid12 > * {width: 33.333%} -} -@media (max-width: 768px) { - .grid3 > *, - .grid4 > *, - .grid5 > *, - .grid6 > *, - .grid8 > *, - .grid10 > *, - .grid12 > * {width: 50%} -} -@media (max-width: 640px) { - .grid > * > * {width: 100% !important} -} diff --git a/css/icons.css b/css/icons.css deleted file mode 100644 index dd79223..0000000 --- a/css/icons.css +++ /dev/null @@ -1,139 +0,0 @@ - -/* ----------------------------- */ -/* ==icons and bullets */ -/* ----------------------------- */ - -.icon {display: inline-block;} - -.icon:before, -.icon.after:after { - content: ""; - display: inline-block; - vertical-align: middle; - position: relative; top: -.1em; - margin: 0 0.3em 0 0; - font: 1.4em/1 sans-serif; - color: #000; - text-shadow: 1px 1px 0 rgba(0,0,0,.1); - speak: none; -} - -@media (min-device-width: 768px) { - .icon:before, - .icon.after:after { - font: 1em/0.6 sans-serif; - -webkit-transform: rotateZ(0.05deg); - } -} - -.icon.after:after { - margin: 0 0 0 8px; -} -.icon.after:before { - content: "" !important -} -.icon-rate:before, -.icon-rate.after:after { - content: "\2605"; -} -.icon-unrate:before, -.icon-unrate.after:after{ - content: "\2606"; -} -.icon-check:before, -.icon-check.after:after{ - content: "\2713"; -} -.icon-uncheck:before, -.icon-uncheck.after:after{ - content: "\2717"; -} -.icon-cloud:before, -.icon-cloud.after:after { - content: "\2601"; -} -.icon-dl:before, -.icon-dl.after:after { - content: "\21E3"; - font-weight: bold; -} -.icon-cross:before, -.icon-cross.after:after { - content: "\2716"; - font-weight: bold; -} -.icon-arrow1:before, -.icon-arrow1.after:after { - content: "\2192"; - position: relative; - top: -0.15em; -} -.icon-arrow2:before, -.icon-arrow2.after:after { - content: "\279E"; -} -.icon-arrow3:before, -.icon-arrow3.after:after { - content: "\279A"; -} -.icon-bracket1:before, -.icon-bracket1.after:after { - content: "\2039"; - font-weight: bold; - font-size: 1.6em; - position: relative; - top: -0.15em; -} -.icon-bracket2:before, -.icon-bracket2.after:after { - content: "\203A"; - font-weight: bold; - font-size: 1.6em; - position: relative; - top: -0.15em; -} -.icon-up:before, -.icon-up.after:after { - content: "\25B2"; -} -.icon-down:before, -.icon-down.after:after { - content: "\25BC"; -} -.icon-bull:before, -.icon-bull.after:after { - content: "\2022"; - font-size: 1.2em; - top: -0.05em; -} -.icon-bull2:before, -.icon-bull2.after:after { - content: "\25E6"; - top: -0.05em; -} -.icon-bull3:before, -.icon-bull3.after:after{ - content: "\2023"; - font-size: 1.6em; - top: -0.05em; -} -.icon-nav:before, -.icon-nav.after:after { - content: "\2261"; - font-weight: bold; -} -.icon-losange:before, -.icon-losange.after:after { - content: "\25C6"; -} -.icon-asteri:before, -.icon-asteri.after:after { - content: "\2731"; - font-weight: bold; -} -.icon-mail:before, -.icon-mail.after:after { - content: "\2709"; - font-size: 1.6em; - top: -.05em; -} diff --git a/css/knacss.css b/css/knacss.css index 034e2a0..ac28758 100644 --- a/css/knacss.css +++ b/css/knacss.css @@ -1,69 +1,84 @@ /*! -* www.KNACSS.com V2.9.2 (2014-01) @author: Raphael Goetter, Alsacreations -* Licence WTFPL http://www.wtfpl.net/ +* www.KNACSS.com V2.9.3 (2014-02) @author: Raphael Goetter, Alsacreations +* Licence WTFPL http://www.wtfpl.net/ */ /* ----------------------------- */ + /* == soft reset */ + /* ----------------------------- */ /* switching box model for all elements */ + * { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } /* soft reset */ + html, body { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } + ul, ol { - padding-left: 2em; + padding-left: 2em; } + ul.unstyled { - list-style: none; + list-style: none; } + img { - vertical-align: middle; - border: 0; + vertical-align: middle; + border: 0; } + audio, canvas, video { - display: inline-block; -} -svg:not(:root) { - overflow: hidden; -} -figure { - margin: 0; + display: inline-block; } +svg:not(:root) { + overflow: hidden; +} + +figure { + margin: 0; +} /* ----------------------------- */ + /* == typography */ + /* ----------------------------- */ /* base font-size corresponds to 10px and is adapted to rem unit */ + html { - font-size: 62.5%; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; + font-size: 62.5%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; } + body { - background-color: #fff; - color: #000; - font-family: helvetica, arial, sans-serif; - font-size: 1.4em; /* equiv 14px */ - line-height: 1.5; /* adapt to your design */ + background-color: #ffffff; + color: #000000; + font-family: Helvetica, Arial, sans-serif; + font-size: 1.4em; + line-height: 1.5; } /* font-sizing for content */ -/* preserves vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */ + +/* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */ + p, ul, ol, @@ -76,143 +91,194 @@ label, textarea, caption, details, -figure { - margin: .75em 0 0; - line-height: 1.5; +figure, +hgroup { + margin-top: .75em; + margin-bottom: 0; + line-height: 1.5; } -h1, .h1-like { - margin: 0.6563em 0 0 0; - font-size: 2.2857em; /* equiv 32px */ - line-height: 1.3126; + +h1, +.h1-like { + margin-top: 0.65625em; + margin-bottom: 0; + font-size: 3.2rem; + line-height: 1.3125; } -h2, .h2-like { - margin: 0.75em 0 0 0; - font-size: 2em; /* equiv 28px */ - line-height: 1.5; + +h2, +.h2-like { + margin-top: 0.75em; + margin-bottom: 0; + font-size: 2.8rem; + line-height: 1.5; } -h3, .h3-like { - margin: 0.875em 0 0 0; - font-size: 1.7143em; /* equiv 24px */ - line-height: 1.75; + +h3, +.h3-like { + margin-top: 0.875em; + margin-bottom: 0; + font-size: 2.4rem; + line-height: 1.75; } -h4, .h4-like { - margin: 1.05em 0 0 0; - font-size: 1.4286em; /* equiv 20px */ - line-height: 1.05; + +h4, +.h4-like { + margin-top: 1.05em; + margin-bottom: 0; + font-size: 2rem; + line-height: 1.05; } -h5, .h5-like { - margin: 1.1667em 0 0 0; - font-size: 1.2857em; /* equiv 18px */ - line-height: 1.1667; + +h5, +.h5-like { + margin-top: 1.1666666666666667em; + margin-bottom: 0; + font-size: 1.8rem; + line-height: 1.1666666666666667; } -h6, .h6-like { - margin: 1.3125em 0 0 0; - font-size: 1.1429em; /* equiv 16px */ - line-height: 1.3125; + +h6, +.h6-like { + margin-top: 1.3125em; + margin-bottom: 0; + font-size: 1.6rem; + line-height: 1.3125; } /* alternate font-sizing */ + .smaller { - font-size: .7143em; /* equiv 10px */ -} -.small { - font-size: .8571em; /* equiv 12px */ -} -.big { - font-size: 1.1429em; /* equiv 16px */ -} -.bigger { - font-size: 1.2857em; /* equiv 18px */ -} -.biggest { - font-size: 1.4286em; /* equiv 20px */ + font-size: 0.7142857142857143em; } -code, +.small { + font-size: 0.8571428571428571em; +} + +.big { + font-size: 1.1428571428571428em; +} + +.bigger { + font-size: 1.2857142857142858em; +} + +.biggest { + font-size: 1.4285714285714286em; +} + +code, pre, samp, kbd { - white-space: pre-line; /* IE fix */ - white-space: pre-wrap; - font-family: consolas, 'DejaVu Sans Mono', courier, monospace; - line-height: 1em; -} -code, kbd, mark { - border-radius: 2px; -} -em { - font-style: italic; -} -strong { - font-weight: bold; -} -kbd { - padding: 0 2px; - border: 1px solid #999; -} -code { - padding: 2px 4px; - background: rgba(0,0,0,.04); - color: #b11; + white-space: pre-line; + /* IE fix */ + white-space: pre-wrap; + font-family: Consolas, 'DejaVu Sans Mono', Courier, monospace; + line-height: 1; } + +code, +kbd, mark { - padding:2px 4px; - background: #ff0; + border-radius: 2px; } + +em { + font-style: italic; +} + +strong { + font-weight: bold; +} + +kbd { + padding: 0 2px; + border: 1px solid #999; +} + +code { + padding: 2px 4px; + background: rgba(0, 0, 0, 0.04); + color: #b11; +} + +mark { + padding: 2px 4px; + background: #ff0; +} + sup, sub { - vertical-align: 0; - position: relative; + vertical-align: 0; + position: relative; } + sup { - bottom: 1ex; + bottom: 1ex; } + sub { - top: .5ex; + top: .5ex; } /* ----------------------------- */ + /* == hiding content */ + /* ----------------------------- */ /* hiding content */ -.visually-hidden { - position: absolute; - left: -7000px; - overflow: hidden; -} -[dir=rtl] .visually-hidden { - left: auto; - right: -7000px; -} -.desktop-hidden { display: none; } /* hidden on desktop */ +.visually-hidden { + position: absolute; + left: -7000px; + overflow: hidden; +} + +[dir=rtl] .visually-hidden { + left: auto; + right: -7000px; +} + +.desktop-hidden { + display: none; +} + +/* hidden on desktop */ /* ----------------------------- */ + /* == skip links styling */ + /* ----------------------------- */ .skip-links { - position: absolute; -} -.skip-links a { - position: absolute; - left: -7000px; - padding: 0.5em; - background: #000; - color:#fff; - text-decoration: none; -} -.skip-links a:focus { - position: static; + position: absolute; } +.skip-links a { + position: absolute; + left: -7000px; + padding: 0.5em; + background: black; + color: white; + text-decoration: none; +} + +.skip-links a:focus { + position: static; +} /* ----------------------------- */ + /* == browsers consistency */ + /* ----------------------------- */ /* avoid top margins on first content element */ + p:first-child, ul:first-child, ol:first-child, @@ -225,265 +291,1579 @@ h3:first-child, h4:first-child, h5:first-child, h6:first-child { - margin-top: 0; + margin-top: 0; } /* avoid margins on nested elements */ + li p, li ul, li ol { - margin-top: 0; - margin-bottom: 0; + margin-top: 0; + margin-bottom: 0; } /* max values */ -img, table, td, blockquote, code, pre, textarea, input, video { - max-width: 100%; + +img, +table, +td, +blockquote, +code, +pre, +textarea, +input, +video { + max-width: 100%; } /* margin-bottom on tables */ -table { margin-bottom: 1.5em; } + +table { + margin-bottom: 1.5em; +} /* Google Gmap3 bug fix on images */ + :not(.gm-style) img { - height: auto !important; + height: auto !important; } + .ie678 .gm-style img { - height: 100%; /* IE678 hack */ + height: 100%; + /* IE678 hack */ } + .gm-style img, .gmnoscreen img, .gmnoprint img { - max-width: none !important; + max-width: none !important; } /* scripts */ -body > script {display: none !important;} +body > script { + display: none !important; +} /* ----------------------------- */ + /* ==layout and modules */ + /* ----------------------------- */ /* float layout */ + /* module, gains superpower "BFC" Block Formating Context */ -.mod { - overflow: hidden; + +.mod { + overflow: hidden; } /* blocks that needs to be placed under floats */ + .clear, .line, .row { - clear: both; + clear: both; } /* blocks that must contain floats */ + .clearfix:after, .line:after, .mod:after { - content: ""; - display: table; - clear: both; + content: ""; + display: table; + clear: both; } /* table layout */ + .row { - display: table; - table-layout: fixed; - width: 100%; + display: table; + table-layout: fixed; + width: 100%; } + .row > *, .col { - display: table-cell; - vertical-align: top; + display: table-cell; + vertical-align: top; } /* inline-block */ + .inbl { - display: inline-block; - vertical-align: top; + display: inline-block; + vertical-align: top; } /* alignments (blocks and inline) */ + /* ------------------------------ */ /* left elements */ + .left { - float: left; + float: left; } + img.left { - margin-right: 1em; + margin-right: 1em; } /* right elements */ + .right { - float: right; + float: right; } + img.right { - margin-left: 1em; + margin-left: 1em; } -img.left, img.right { - margin-bottom: 5px; +img.left, +img.right { + margin-bottom: 5px; } -.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 */ + /* .. use only when needed */ -/* ----------------------------- */ - -/* blocks widths (percentages and pixels) */ -.w10 { width: 10%; } -.w20 { width: 20%; } -.w25 { width: 25%; } -.w30 { 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; } - /* ----------------------------- */ + +/* blocks widths (percentage and pixels) */ + +.w10 { + width: 10%; +} + +.w20 { + width: 20%; +} + +.w25 { + width: 25%; +} + +.w30 { + 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; +} + +/* ----------------------------- */ + /* == spacing helpers */ + /* .. use only when needed */ + /* ----------------------------- */ /* spacing helpers p,m = padding,margin a,t,r,b,l = all,top,right,bottom,left -s,m,l,n,0 = small(10px),medium(20px),large(30px), zero or none(0) +s,m,l,n = small(10px),medium(20px),large(30px),none(0) source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css */ -.m-reset, .ma0 { margin: 0; } -.p-reset, .pa0 { padding: 0; } -.ma1, .mas { margin: 10px; } -.ma2, .mam { margin: 20px; } -.ma3, .mal { margin: 30px; } -.pa1, .pas { padding: 10px; } -.pa2, .pam { padding: 20px; } -.pa3, .pal { padding: 30px; } -.mt0, .mtn { margin-top: 0; } -.mt1, .mts { margin-top: 10px; } -.mt2, .mtm { margin-top: 20px; } -.mt3, .mtl { margin-top: 30px; } -.mr0, .mrn { margin-right: 0; } -.mr1, .mrs { margin-right: 10px; } -.mr2, .mrm { margin-right: 20px; } -.mr3, .mrl { margin-right: 30px; } -.mb0, .mbn { margin-bottom: 0; } -.mb1, .mbs { margin-bottom: 10px; } -.mb2, .mbm { margin-bottom: 20px; } -.mb3, .mbl { margin-bottom: 30px; } -.ml0, .mln { margin-left: 0; } -.ml1, .mls { margin-left: 10px; } -.ml2, .mlm { margin-left: 20px; } -.ml3, .mll { margin-left: 30px; } +.m-reset, +.ma0 { + margin: 0; +} -.pt0, .ptn { padding-top: 0; } -.pt1, .pts { padding-top: 10px; } -.pt2, .ptm { padding-top: 20px; } -.pt3, .ptl { padding-top: 30px; } -.pr0, .prn { padding-right: 0; } -.pr1, .prs { padding-right: 10px; } -.pr2, .prm { padding-right: 20px; } -.pr3, .prl { padding-right: 30px; } -.pb0, .pbn { padding-bottom: 0; } -.pb1, .pbs { padding-bottom: 10px; } -.pb2, .pbm { padding-bottom: 20px; } -.pb3, .pbl { padding-bottom: 30px; } -.pl0, .pln { padding-left: 0; } -.pl1, .pls { padding-left: 10px; } -.pl2, .plm { padding-left: 20px; } -.pl3, .pll { padding-left: 30px; } +.p-reset, +.pa0 { + padding: 0; +} +.ma1, +.mas { + margin: 10px; +} + +.ma2, +.mam { + margin: 20px; +} + +.ma3, +.mal { + margin: 30px; +} + +.pa1, +.pas { + padding: 10px; +} + +.pa2, +.pam { + padding: 20px; +} + +.pa3, +.pal { + padding: 30px; +} + +.mt0, +.mtn { + margin-top: 0; +} + +.mt1, +.mts { + margin-top: 10px; +} + +.mt2, +.mtm { + margin-top: 20px; +} + +.mt3, +.mtl { + margin-top: 30px; +} + +.mr0, +.mrn { + margin-right: 0; +} + +.mr1, +.mrs { + margin-right: 10px; +} + +.mr2, +.mrm { + margin-right: 20px; +} + +.mr3, +.mrl { + margin-right: 30px; +} + +.mb0, +.mbn { + margin-bottom: 0; +} + +.mb1, +.mbs { + margin-bottom: 10px; +} + +.mb2, +.mbm { + margin-bottom: 20px; +} + +.mb3, +.mbl { + margin-bottom: 30px; +} + +.ml0, +.mln { + margin-left: 0; +} + +.ml1, +.mls { + margin-left: 10px; +} + +.ml2, +.mlm { + margin-left: 20px; +} + +.ml3, +.mll { + margin-left: 30px; +} + +.pt0, +.ptn { + padding-top: 0; +} + +.pt1, +.pts { + padding-top: 10px; +} + +.pt2, +.ptm { + padding-top: 20px; +} + +.pt3, +.ptl { + padding-top: 30px; +} + +.pr0, +.prn { + padding-right: 0; +} + +.pr1, +.prs { + padding-right: 10px; +} + +.pr2, +.prm { + padding-right: 20px; +} + +.pr3, +.prl { + padding-right: 30px; +} + +.pb0, +.pbn { + padding-bottom: 0; +} + +.pb1, +.pbs { + padding-bottom: 10px; +} + +.pb2, +.pbm { + padding-bottom: 20px; +} + +.pb3, +.pbl { + padding-bottom: 30px; +} + +.pl0, +.pln { + padding-left: 0; +} + +.pl1, +.pls { + padding-left: 10px; +} + +.pl2, +.plm { + padding-left: 20px; +} + +.pl3, +.pll { + padding-left: 30px; +} /* ----------------------------- */ + /* == iefix */ + /* ----------------------------- */ +/* Make sure you are using Conditional Classes in your HTML */ + +/* see : http://www.alsacreations.com/astuce/lire/988-classes-conditionnelles-HTML.html */ + +.ie678 h1, +.ie678 .h1-like { + font-size: 2.2857142857142856em; +} + +.ie678 h2, +.ie678 .h2-like { + font-size: 2em; +} + +.ie678 h3, +.ie678 .h3-like { + font-size: 1.7142857142857142em; +} + +.ie678 h4, +.ie678 .h4-like { + font-size: 1.4285714285714286em; +} + +.ie678 h5, +.ie678 .h5-like { + font-size: 1.2857142857142858em; +} + +.ie678 h6, +.ie678 .h6-like { + font-size: 1.1428571428571428em; +} + /* hasLayout for IE6/IE7 */ + .ie67 .clearfix, .ie67 .line, .ie67 .mod, .ie67 .row, .ie67 .col { - zoom: 1; + zoom: 1; } /* inline-block and table-cell for IE6/IE7 */ -/* warning: .col needs a width on IE6/IE7 */ + +/* warning: .col needs width on IE6/IE7 */ + .ie67 .btn, .ie67 .col, .ie67 .inbl { - display: inline; - zoom: 1; + display: inline; + zoom: 1; } + .ie8 img { - width: auto; /* @bugfix for IE8 */ + width: auto; + /* @bugfix for IE8 */ } /* Active box-sizing for IE6/IE7 */ + /* @source https://github.com/Schepp/box-sizing-polyfill */ + /* .ie67 * { behavior: url(/lib/box-sizing-polyfill/boxsizing.htc); } */ - /* ----------------------------- */ + /* == quick print reset */ + /* ----------------------------- */ @media print { - p, - blockquote { - orphans: 2; - widows: 2; - } - blockquote, - ul, - ol { - page-break-inside: avoid; - } - h1, - h2, - h3, - caption { - page-break-after: avoid; - } + p, + blockquote { + orphans: 2; + widows: 2; + } + + blockquote, + ul, + ol { + page-break-inside: avoid; + } + + h1, + h2, + h3, + caption { + page-break-after: avoid; + } } /* debug helper */ + .knacss-debug { - background: pink; - outline: 3px solid maroon; + background: pink; + outline: 3px solid maroon; } + +/* grids inspired from SUIT https://github.com/suitcss/suit */ + +/* font-family hack explained here : https://github.com/raphaelgoetter/KNACSS/issues/37 */ + +.grid { + overflow: hidden; + font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; +} + +.grid > * { + display: block; + padding: 0; + margin-left: -20px; + /* gutter value */ + text-align: left; + letter-spacing: -0.31em; + text-rendering: optimizespeed; +} + +/* Opera hack */ + +.opera:-o-prefocus, +.grid > * { + word-spacing: -0.43em; +} + +.grid > * > * { + display: inline-block; + width: 100%; + padding-left: 20px; + /* gutter value */ + margin-left: 0; + vertical-align: top; + text-align: left; + letter-spacing: normal; + word-spacing: normal; + text-rendering: auto; + *display: inline; + *zoom: 1; + /* IE67 hack */ + font-family: Helvetica, Arial, sans-serif; +} + +.grid2 > * { + width: 50%; +} + +.grid3 > * { + width: 33.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 */ + +.grid2-1 > *:first-child, +.grid1-2 > * + * { + width: 66.666%; +} + +.grid1-2 > *:first-child, +.grid2-1 > * + * { + width: 33.333%; +} + +.grid1-3 > *:first-child, +.grid3-1 > * + * { + width: 25%; +} + +.grid3-1 > *:first-child, +.grid1-3 > * + * { + width: 75%; +} + +/* Responsiv-o-matic */ + +@media (max-width: 1280px) { + .grid5 > *, + .grid6 > *, + .grid8 > *, + .grid10 > *, + .grid12 > * { + width: 33.333%; + } +} + +@media (max-width: 768px) { + .grid3 > *, + .grid4 > *, + .grid5 > *, + .grid6 > *, + .grid8 > *, + .grid10 > *, + .grid12 > * { + width: 50%; + } +} + +@media (max-width: 480px) { + .grid > * > * { + width: 100% !important; + } +} + +/* ----------------------------- */ + +/* ==tables */ + +/* ----------------------------- */ + +table, +.table { + max-width: 100%; + table-layout: fixed; + border-collapse: collapse; + vertical-align: top; +} + +table { + width: 100%; +} + +.table { + display: table; +} + +table#recaptcha_table, +table.table-auto { + table-layout: auto; +} + +caption { + padding: 10px; + color: #555; + font-style: italic; +} + +table { + border: 1px solid #ccc; +} + +tr > * + * { + border-left: 1px solid #ccc; +} + +th, +td { + padding: .3em .8em; + text-align: left; + border-bottom: 1px solid #ccc; +} + +td { + color: #333; +} + +/* alternate tables */ + +.alternate { + border: 0; +} + +.alternate tbody { + border: 1px solid #ccc; +} + +.alternate thead tr > * + * { + border-left: 0; +} + +.alternate tbody tr > * + * { + border-left: 1px solid #ccc; +} + +/* alternate-vert tables */ + +.alternate-vert { + border: 0; + border-right: 1px solid #ccc; +} + +.alternate-vert tr > :first-child { + border-bottom: 0; +} + +.alternate-vert tr > * + * { + border-top: 1px solid #ccc; +} + +/* striped tables */ + +.striped tbody tr:nth-child(odd) { + background: #eee; + background: rgba(0, 0, 0, 0.05); +} + +/* striped-vert tables */ + +.striped-vert tr > :first-child { + background: #eee; + background: rgba(0, 0, 0, 0.05); +} + +/* ----------------------------- */ + +/* ==forms */ + +/* ----------------------------- */ + +/* thanks to HTML5boilerplate, +* github.com/nathansmith/formalize +* and www.sitepen.com +*/ + +/* buttons */ + +.btn { + display: inline-block; +} + +/* forms items */ + +form, +fieldset { + border: none; +} + +input, +button, +select, +label, +.btn { + vertical-align: middle; + font-family: inherit; + font-size: inherit; +} + +label { + display: inline-block; + vertical-align: middle; + cursor: pointer; +} + +legend { + border: 0; + white-space: normal; +} + +textarea { + overflow: auto; + /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */ + min-height: 5em; + vertical-align: top; + font-family: inherit; + font-size: inherit; + resize: vertical; +} + +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + cursor: pointer; + -webkit-appearance: button; + /* clickable input types in iOS */ +} + +input[type="checkbox"], +input[type="radio"] { + padding: 0; + /* Corrects excess space around these inputs in IE8/9 */ +} + +input[type="search"] { + -webkit-appearance: textfield; +} + +/* if select styling bugs on WebKit */ + +/* 'x' appears on right of search input when text is entered. This removes it */ + +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-results-button, +input[type="search"]::-webkit-search-results-decoration { + display: none; +} + +::-webkit-input-placeholder { + color: #777; +} + +input:-moz-placeholder, +textarea:-moz-placeholder { + color: #777; +} + +/* Removes inner padding and border in FF3+ */ + +button::-moz-focus-inner, +input[type='button']::-moz-focus-inner, +input[type='reset']::-moz-focus-inner, +input[type='submit']::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* ----------------------------- */ + +/* ==icons and bullets */ + +/* ----------------------------- */ + +.icon { + display: inline-block; +} + +.icon:before, +.icon.after:after { + content: ""; + display: inline-block; + vertical-align: middle; + position: relative; + top: -0.1em; + margin: 0 0.3em 0 0; + font: 1.4em/1 sans-serif; + color: #000; + text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1); + speak: none; +} + +@media (min-device-width: 768px) { + .icon:before, + .icon.after:after { + font: 1em/0.6 sans-serif; + -webkit-transform: rotateZ(0.05deg); + } +} + +.icon.after:after { + margin: 0 0 0 8px; +} + +.icon.after:before { + content: "" !important; +} + +.icon-rate:before, +.icon-rate.after:after { + content: "\2605"; +} + +.icon-unrate:before, +.icon-unrate.after:after { + content: "\2606"; +} + +.icon-check:before, +.icon-check.after:after { + content: "\2713"; +} + +.icon-uncheck:before, +.icon-uncheck.after:after { + content: "\2717"; +} + +.icon-cloud:before, +.icon-cloud.after:after { + content: "\2601"; +} + +.icon-dl:before, +.icon-dl.after:after { + content: "\21E3"; + font-weight: bold; +} + +.icon-cross:before, +.icon-cross.after:after { + content: "\2716"; + font-weight: bold; +} + +.icon-arrow1:before, +.icon-arrow1.after:after { + content: "\2192"; + position: relative; + top: -0.15em; +} + +.icon-arrow2:before, +.icon-arrow2.after:after { + content: "\279E"; +} + +.icon-arrow3:before, +.icon-arrow3.after:after { + content: "\279A"; +} + +.icon-bracket1:before, +.icon-bracket1.after:after { + content: "\2039"; + font-weight: bold; + font-size: 1.6em; + position: relative; + top: -0.15em; +} + +.icon-bracket2:before, +.icon-bracket2.after:after { + content: "\203A"; + font-weight: bold; + font-size: 1.6em; + position: relative; + top: -0.15em; +} + +.icon-up:before, +.icon-up.after:after { + content: "\25B2"; +} + +.icon-down:before, +.icon-down.after:after { + content: "\25BC"; +} + +.icon-bull:before, +.icon-bull.after:after { + content: "\2022"; + font-size: 1.2em; + top: -0.05em; +} + +.icon-bull2:before, +.icon-bull2.after:after { + content: "\25E6"; + top: -0.05em; +} + +.icon-bull3:before, +.icon-bull3.after:after { + content: "\2023"; + font-size: 1.6em; + top: -0.05em; +} + +.icon-nav:before, +.icon-nav.after:after { + content: "\2261"; + font-weight: bold; +} + +.icon-losange:before, +.icon-losange.after:after { + content: "\25C6"; +} + +.icon-asteri:before, +.icon-asteri.after:after { + content: "\2731"; + font-weight: bold; +} + +.icon-mail:before, +.icon-mail.after:after { + content: "\2709"; + font-size: 1.6em; + top: -0.05em; +} + +/* ----------------------------- */ + +/* ==desktop and retina medias */ + +/* ----------------------------- */ + +@media (min-width: 768px) { + /* 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) { + /* Style adjustments for retina devices */ +} + +/* ---------------------------------- */ + +/* ==Responsive large / medium / tiny */ + +/* ---------------------------------- */ + +@media (min-width: 1280px) { + /* layouts for large screens */ + + .large-hidden { + display: none !important; + } + + .large-visible { + display: block !important; + } + + .large-no-float { + float: none; + } + + .large-inbl { + display: inline-block; + float: none; + vertical-align: top; + } + + .large-row { + display: table; + table-layout: fixed; + width: 100% !important; + } + + .large-col { + display: table-cell; + vertical-align: top; + } + + /* widths for large screens */ + + .large-w25 { + width: 25% !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-wauto { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + + /* margins for large screens */ + + .large-ma0 { + margin: 0 !important; + } +} + +@media (max-width: 768px) { + /* quick reset in small resolution and less */ + + .w600p, + .w700p, + .w800p, + .w960p, + .mw960p { + width: auto; + float: none; + } + + /* layouts for small screens */ + + .small-hidden { + display: none !important; + } + + .small-visible { + display: block !important; + } + + .small-no-float { + float: none; + } + + .small-inbl { + display: inline-block; + float: none; + vertical-align: top; + } + + .small-row { + display: table !important; + table-layout: fixed !important; + width: 100% !important; + } + + .small-col { + display: table-cell !important; + vertical-align: top !important; + } + + /* you shall not pass */ + + div, + textarea, + table, + td, + th, + code, + pre, + samp { + word-wrap: break-word; + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + -o-hyphens: auto; + hyphens: auto; + } + + /* widths for small screens */ + + .small-w25 { + width: 25% !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-wauto { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + + /* margins for small screens */ + + .small-ma0 { + margin: 0 !important; + } +} + +@media (max-width: 480px) { + /* quick tiny resolution reset */ + + .mod, + .col, + fieldset { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + + .w300p, + .w400p, + .w500p { + width: auto; + float: none; + } + + .row { + display: block !important; + width: 100% !important; + } + + /* layouts for tiny screens */ + + .tiny-hidden { + display: none !important; + } + + .tiny-visible { + display: block !important; + } + + .tiny-no-float { + float: none; + } + + .tiny-inbl { + display: inline-block; + float: none; + vertical-align: top; + } + + .tiny-row { + display: table !important; + table-layout: fixed !important; + width: 100% !important; + } + + .tiny-col { + display: table-cell !important; + vertical-align: top !important; + } + + th, + td { + display: block !important; + width: auto !important; + text-align: left !important; + } + + thead { + display: none; + } + + /* widths for tiny screens */ + + .tiny-w25 { + width: 25% !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-wauto { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; + } + + /* margins for tiny screens */ + + .tiny-ma0 { + margin: 0 !important; + } +} + +/* flexbox layout +Tutorial: http://knacss.com/demos/tutoriel.html#flex */ + +.flex { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; +} + +.flex-h { + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + -webkit-box-direction: normal; + -moz-box-direction: normal; + flex-direction: row; +} + +.flex-v { + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -webkit-flex-direction: column; + -ms-flex-direction: column; + -webkit-box-direction: normal; + -moz-box-direction: normal; + flex-direction: column; +} + +.flex-fluid { + -moz-box-flex: 1; + -webkit-flex: 1; + -moz-flex: 1; + -ms-flex: 1; + -webkit-box-flex: 1; + flex: 1; +} + +.flex-start { + -webkit-box-ordinal-group: -1; + -moz-box-ordinal-group: 0; + -ms-flex-order: -1; + -webkit-order: -1; + -moz-order: -1; + -webkit-box-ordinal-group: 0; + order: -1; +} + +.flex-mid { + -webkit-box-ordinal-group: 1; + -moz-box-ordinal-group: 1; + -ms-flex-order: 1; + -webkit-order: 1; + -moz-order: 1; + -webkit-box-ordinal-group: 2; + -moz-box-ordinal-group: 2; + order: 1; +} + +.flex-end { + -webkit-box-ordinal-group: 42; + -moz-box-ordinal-group: 42; + -ms-flex-order: 42; + -webkit-order: 42; + -moz-order: 42; + -webkit-box-ordinal-group: 43; + -moz-box-ordinal-group: 43; + order: 42; +} + +/* quick print reset */ + +@media print { + * { + background: transparent !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + text-shadow: none !important; + } + + body { + width: auto !important; + margin: auto !important; + font-family: serif; + font-size: 12pt; + background-color: #fff !important; + color: #333 !important; + } + + p, + h1, + h2, + h3, + h4, + h5, + h6, + blockquote, + ul, + ol { + color: #000 !important; + margin: auto !important; + } + + .print { + display: block; + /* displaying .print elements */ + } + + img { + -webkit-filter: grayscale(100%); + -moz-filter: grayscale(100%); + -ms-filter: grayscale(100%); + -o-filter: grayscale(100%); + filter: grayscale(100%); + } + + p, + blockquote { + orphans: 3; + /* no orphans */ + widows: 3; + /* no widows */ + } + + blockquote, + ul, + ol { + page-break-inside: avoid; + /* no breaks inside these elements */ + } + + h1 { + page-break-before: always; + /* page break before main headers */ + } + + h1, + h2, + h3, + caption { + page-break-after: avoid; + /* no breaks after these elements */ + } + + a { + color: #000 !important; + text-decoration: underline !important; + } + + a[href]:after { + content: " (" attr(href) ")"; + /* displaying URLs */ + } + + a[href^="javascript:"]:after, + a[href^="#"]:after { + content: ""; + } +} + +/* ----------------------------- */ + +/* ==own stylesheet */ + +/* ----------------------------- */ + +/* Here should go your own CSS styles */ + +/* You can also link them with a LESS @import */ + +/* @import "my-styles.less"; */ \ No newline at end of file diff --git a/css/rwd.css b/css/rwd.css deleted file mode 100644 index 29c4682..0000000 --- a/css/rwd.css +++ /dev/null @@ -1,214 +0,0 @@ - -/* ----------------------------- */ -/* ==viewport fixing for RWD */ -/* ----------------------------- */ -@-webkit-viewport { - width: device-width; - zoom: 1.0; -} -@-moz-viewport { - width: device-width; - zoom: 1.0; -} -@-ms-viewport { - width: device-width; - zoom: 1.0; -} -@-o-viewport { - width: device-width; - zoom: 1.0; -} -@viewport { - width: device-width; - zoom: 1.0; -} - -/* ----------------------------- */ -/* ==desktop and retina medias */ -/* ----------------------------- */ - -@media (min-width: 641px) { -/* 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) { -/* Style adjustments for retina devices */ -} - -/* ---------------------------------- */ -/* ==Responsive large / small / tiny */ -/* ---------------------------------- */ - -@media (min-width: 1280px) { - - /* layouts for large (l) screens */ - .large-hidden, - .tablet-hidden { display: none !important; } - .large-visible { display: block !important; } - .large-no-float {float: none; } - .large-inbl { - display: inline-block; - float: none; - vertical-align: top; - } - .large-row { - display: table; - table-layout: fixed; - width: 100% !important; - } - .large-col { - display: table-cell; - vertical-align: top; - } - - /* widths for large (l) screens */ - .large-w25 { width: 25% !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 { - display: block !important; - float: none !important; - clear: none !important; - width: auto !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: 0; - } - - /* margins for large (l) screens */ - .large-ma0 { margin: 0 !important; } -} - -@media (max-width: 768px) { - - /* quick tablet reset */ - .w600p, - .w700p, - .w800p, - .w960p, - .mw960p, - .small-wauto { - width: auto; - float: none; - } - - /* you shall not pass */ - div, textarea, table, td, th, code, pre, samp { - word-wrap: break-word; - -webkit-hyphens: auto; - -moz-hyphens: auto; - -ms-hyphens: auto; - -o-hyphens: auto; - hyphens: auto; - } - - /* layouts for small (s) screens */ - .small-hidden, - .tablet-hidden { display: none !important; } - .small-visible { display: block !important; } - .small-no-float {float: none; } - .small-inbl { - display: inline-block; - float: none; - vertical-align: top; - } - .small-row { - display: table !important; - table-layout: fixed !important; - width: 100% !important; - } - .small-col { - display: table-cell !important; - vertical-align: top !important; - } - - /* widths for small (s) screens */ - .small-w25 { width: 25% !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 { - display: block !important; - float: none !important; - clear: none !important; - width: auto !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: 0; - } - /* margins for small (s) screens */ - .small-ma0 { margin: 0 !important; } -} - -@media (max-width: 640px) { - - /* quick smartphone reset */ - .mod, - .col, - fieldset { - display: block !important; - float: none !important; - clear: none !important; - width: auto !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: 0; - } - .w300p, - .w400p, - .w500p { - width: auto; - float: none; - } - .row { - display: block !important; - width: 100% !important; - } - - /* layouts for tiny (t) screens */ - .tiny-hidden, - .phone-hidden { display: none !important; } - .tiny-visible { display: block !important; } - .tiny-no-float {float: none;} - .tiny-inbl { - display: inline-block; - float: none; - vertical-align: top; - } - .tiny-row { - display: table !important; - table-layout: fixed !important; - width: 100% !important; - } - .tiny-col { - display: table-cell !important; - vertical-align: top !important; - } - th, - td { - display: block !important; - width: auto !important; - text-align: left !important; - } - thead { display: none; } - - /* widths for tiny (t) screens */ - .tiny-w25 { width: 25% !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 { - display: block !important; - float: none !important; - clear: none !important; - width: auto !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: 0; - } - /* margins for tiny (t) screens */ - .tiny-ma0 { margin: 0 !important; } -} \ No newline at end of file diff --git a/css/tables.css b/css/tables.css deleted file mode 100644 index 66f1bf5..0000000 --- a/css/tables.css +++ /dev/null @@ -1,78 +0,0 @@ - -/* ----------------------------- */ -/* ==tables */ -/* ----------------------------- */ - -table, -.table { - max-width : 100%; - table-layout: fixed; - border-collapse: collapse; - vertical-align: top; -} -table { - width: 100%; -} -.table { - display: table; -} -table#recaptcha_table, -table.table-auto { - table-layout:auto; -} -caption { - padding: 10px; - color: #555; - font-style: italic; -} -table { - border: 1px solid #ccc; -} -tr > * + * { - border-left: 1px solid #ccc; -} -th, -td { - padding: .3em .8em; - text-align: left; - border-bottom: 1px solid #ccc; -} -td { - color: #333; -} - -/* alternate tables */ -.alternate { border: 0; } -.alternate tbody { - border: 1px solid #ccc; -} -.alternate thead tr > * + * { - border-left: 0; -} -.alternate tbody tr > * + * { - border-left: 1px solid #ccc; -} - -/* alternate-vert tables */ -.alternate-vert { - border: 0; - border-right: 1px solid #ccc; -} -.alternate-vert tr > :first-child { - border-bottom: 0; -} -.alternate-vert tr > * + * { - border-top: 1px solid #ccc; -} - -/* striped tables */ -.striped tbody tr:nth-child(odd) { - background: #eee; - background: rgba(0, 0, 0, .05); -} - -/* striped-vert tables */ -.striped-vert tr > :first-child { - background: #eee; - background: rgba(0, 0, 0, .05); -} \ No newline at end of file diff --git a/less/_00-config.less b/less/00-config.less similarity index 100% rename from less/_00-config.less rename to less/00-config.less diff --git a/less/_01-base.less b/less/01-base.less similarity index 97% rename from less/_01-base.less rename to less/01-base.less index 44d4c9d..d713d2e 100644 --- a/less/_01-base.less +++ b/less/01-base.less @@ -1,3 +1,8 @@ +@import "00-config"; +/*! +* www.KNACSS.com V2.9.3 (2014-02) @author: Raphael Goetter, Alsacreations +* Licence WTFPL http://www.wtfpl.net/ +*/ /* ----------------------------- */ /* == soft reset */ @@ -353,6 +358,7 @@ img.left, img.right { .mw960p { max-width: 960px; } .w1140p { width: 1140px; } .mw1140p { max-width: 1140px; } +.wauto { width: auto; } /* ----------------------------- */ @@ -436,7 +442,7 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css .em(@h6-size); } -/* haslayout for IE6/IE7 */ +/* hasLayout for IE6/IE7 */ .ie67 .clearfix, .ie67 .line, .ie67 .mod, diff --git a/less/_02-grids.less b/less/02-grids.less similarity index 98% rename from less/_02-grids.less rename to less/02-grids.less index 72f5ab9..468d8ca 100644 --- a/less/_02-grids.less +++ b/less/02-grids.less @@ -1,4 +1,4 @@ - +@import "00-config"; /* grids inspired from SUIT https://github.com/suitcss/suit */ /* font-family hack explained here : https://github.com/raphaelgoetter/KNACSS/issues/37 */ diff --git a/less/_03-tables.less b/less/03-tables.less similarity index 98% rename from less/_03-tables.less rename to less/03-tables.less index 66f1bf5..80c3509 100644 --- a/less/_03-tables.less +++ b/less/03-tables.less @@ -1,4 +1,4 @@ - +@import "00-config"; /* ----------------------------- */ /* ==tables */ /* ----------------------------- */ diff --git a/less/_04-forms.less b/less/04-forms.less similarity index 98% rename from less/_04-forms.less rename to less/04-forms.less index 01b46ab..92b1f3b 100644 --- a/less/_04-forms.less +++ b/less/04-forms.less @@ -1,4 +1,4 @@ - +@import "00-config"; /* ----------------------------- */ /* ==forms */ /* ----------------------------- */ diff --git a/less/_05-icons.less b/less/05-icons.less similarity index 99% rename from less/_05-icons.less rename to less/05-icons.less index 02f43f8..3345e34 100644 --- a/less/_05-icons.less +++ b/less/05-icons.less @@ -1,4 +1,4 @@ - +@import "00-config"; /* ----------------------------- */ /* ==icons and bullets */ /* ----------------------------- */ diff --git a/less/_06-rwd.less b/less/06-rwd.less similarity index 85% rename from less/_06-rwd.less rename to less/06-rwd.less index 804c4f2..36943b8 100644 --- a/less/_06-rwd.less +++ b/less/06-rwd.less @@ -1,4 +1,4 @@ - +@import "00-config"; /* ----------------------------- */ /* ==desktop and retina medias */ /* ----------------------------- */ @@ -16,9 +16,8 @@ @media (min-width: @largescreen) { - /* layouts for large (l) screens */ - .large-hidden, - .tablet-hidden { display: none !important; } + /* layouts for large screens */ + .large-hidden { display: none !important; } .large-visible { display: block !important; } .large-no-float {float: none; } .large-inbl { @@ -36,13 +35,14 @@ vertical-align: top; } - /* widths for large (l) screens */ + /* widths for large screens */ .large-w25 { width: 25% !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 { display: block !important; float: none !important; clear: none !important; @@ -52,26 +52,24 @@ border: 0; } - /* margins for large (l) screens */ + /* margins for large screens */ .large-ma0 { margin: 0 !important; } } @media (max-width: @smallscreen) { - /* quick tablet reset */ + /* quick reset in small resolution and less */ .w600p, .w700p, .w800p, .w960p, - .mw960p, - .small-wauto { + .mw960p { width: auto; float: none; } - /* layouts for medium (m) screens */ - .small-hidden, - .tablet-hidden { display: none !important; } + /* layouts for small screens */ + .small-hidden { display: none !important; } .small-visible { display: block !important; } .small-no-float {float: none; } .small-inbl { @@ -99,13 +97,14 @@ hyphens: auto; } - /* widths for small (s) screens */ + /* widths for small screens */ .small-w25 { width: 25% !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 { display: block !important; float: none !important; clear: none !important; @@ -114,13 +113,13 @@ margin-right: 0 !important; border: 0; } - /* margins for small (s) screens */ + /* margins for small screens */ .small-ma0 { margin: 0 !important; } } @media (max-width: @tinyscreen) { - /* quick smartphone reset */ + /* quick tiny resolution reset */ .mod, .col, fieldset { @@ -143,9 +142,8 @@ width: 100% !important; } - /* layouts for tiny (t) screens */ - .tiny-hidden, - .phone-hidden { display: none !important; } + /* layouts for tiny screens */ + .tiny-hidden { display: none !important; } .tiny-visible { display: block !important; } .tiny-no-float {float: none;} .tiny-inbl { @@ -170,13 +168,14 @@ } thead { display: none; } - /* widths for tiny (t) screens */ + /* widths for tiny screens */ .tiny-w25 { width: 25% !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 { display: block !important; float: none !important; clear: none !important; @@ -185,6 +184,6 @@ margin-right: 0 !important; border: 0; } - /* margins for tiny (t) screens */ + /* margins for tiny screens */ .tiny-ma0 { margin: 0 !important; } } diff --git a/less/_07-flexbox.less b/less/07-flexbox.less similarity index 88% rename from less/_07-flexbox.less rename to less/07-flexbox.less index 80f65f5..61b7058 100644 --- a/less/_07-flexbox.less +++ b/less/07-flexbox.less @@ -1,9 +1,10 @@ - -/* flexbox layout */ +@import "00-config"; +/* flexbox layout +Tutorial: http://knacss.com/demos/tutoriel.html#flex */ .flex { display : -webkit-box; display : -moz-box; - display: -ms-flexbox; + display : -ms-flexbox; display : -webkit-flex; display : flex; } diff --git a/css/print.css b/less/08-print.less similarity index 98% rename from css/print.css rename to less/08-print.less index 8fd63fa..c954185 100644 --- a/css/print.css +++ b/less/08-print.less @@ -1,3 +1,4 @@ +@import "00-config"; /* quick print reset */ @media print { * { diff --git a/less/_08-print.less b/less/_08-print.less deleted file mode 100644 index 8fd63fa..0000000 --- a/less/_08-print.less +++ /dev/null @@ -1,69 +0,0 @@ -/* quick print reset */ -@media print { - * { - background: transparent !important; - box-shadow: none !important; - text-shadow: none !important; - } - body { - width: auto !important; - margin: auto !important; - font-family: serif; - font-size: 12pt; - background-color: #fff !important; - color: #333 !important; - } - p, - h1, - h2, - h3, - h4, - h5, - h6, - blockquote, - ul, - ol { - color: #000 !important; - margin: auto !important; - } - .print { - display: block; /* displaying .print elements */ - } - img { - -webkit-filter: grayscale(100%); - -moz-filter: grayscale(100%); - -ms-filter: grayscale(100%); - -o-filter: grayscale(100%); - filter: grayscale(100%); - } - p, - blockquote { - orphans: 3; /* no orphans */ - widows: 3; /* no widows */ - } - blockquote, - ul, - ol { - page-break-inside: avoid; /* no breaks inside these elements */ - } - h1 { - page-break-before: always; /* page break before main headers */ - } - h1, - h2, - h3, - caption { - page-break-after: avoid; /* no breaks after these elements */ - } - a { - color: #000 !important; - text-decoration: underline !important; - } - a[href]:after { - content: " (" attr(href) ")"; /* displaying URLs */ - } - a[href^="javascript:"]:after, - a[href^="#"]:after { - content: ""; - } -} \ No newline at end of file diff --git a/less/knackLESS.zip b/less/knackLESS.zip index f53a275d486828386189635529220dc3c5b8ba99..620c58bc824f9071e2b84bbd7af6d594580252f7 100644 GIT binary patch delta 8557 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 delta 8381 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 X#{Bgaphy5{h>$g&bE%f{_vilsOYb{o diff --git a/less/knacss.less b/less/knacss.less index 4a27af6..a07e790 100644 --- a/less/knacss.less +++ b/less/knacss.less @@ -1,22 +1,17 @@ -/*! -* www.KNACSS.com V2.9.2 (2014-01) @author: Raphael Goetter, Alsacreations -* Licence WTFPL http://www.wtfpl.net/ -*/ - // LESS config file -@import "_00-config"; +@import "00-config"; // LESS base styles -@import "_01-base"; +@import "01-base"; // LESS files : chose the ones you need -@import "_02-grids"; -@import "_03-tables"; -@import "_04-forms"; -@import "_05-icons"; -@import "_06-rwd"; -@import "_07-flexbox"; -@import "_08-print"; +@import "02-grids"; +@import "03-tables"; +@import "04-forms"; +@import "05-icons"; +@import "06-rwd"; +@import "07-flexbox"; +@import "08-print"; /* ----------------------------- */ /* ==own stylesheet */