From 01633e9d9e917ee5618e4dd313472c3f4ec5ed0c Mon Sep 17 00:00:00 2001 From: Raphael Goetter Date: Wed, 7 May 2014 10:45:47 +0200 Subject: [PATCH] General normalization on LESS files --- less/00-config.less | 4 +- less/01-base.less | 467 +++++++++++++++++++++++++++++++++--------- less/02-grids.less | 158 ++++++++++---- less/03-tables.less | 6 +- less/04-forms.less | 13 +- less/05-icons.less | 26 ++- less/06-rwd.less | 155 +++++++++++--- less/07-flexbox.less | 8 +- less/08-print.less | 41 ++-- less/09-booleans.less | 11 +- less/10-gmaps.less | 4 +- less/11-ie.less | 19 +- less/12-styling.less | 23 ++- less/knacss.less | 2 +- 14 files changed, 741 insertions(+), 196 deletions(-) diff --git a/less/00-config.less b/less/00-config.less index 1997fab..521d1ea 100644 --- a/less/00-config.less +++ b/less/00-config.less @@ -1,6 +1,5 @@ // Config file : variables, mixins, ... - // booleans @enable-ie678 : true; // "true" to activate IE6/IE7/IE8 support @enable-styling : true; // "true" to design basic elements like code, mark, blockquotes, etc. @@ -52,7 +51,6 @@ // misc @gutter : 20px; // gutter value (%, px, em, rem) for grid layouts - // LESS mixins : don't touch or you'll be banned ;) // px to em/rem .rem(@size, @bf: @base-font-size){ @@ -63,4 +61,4 @@ .em(@size, @bf: @base-font-size){ @em: @size / @bf; font-size: unit(round(@em,2), em); -} \ No newline at end of file +} diff --git a/less/01-base.less b/less/01-base.less index 4873058..cfc6248 100644 --- a/less/01-base.less +++ b/less/01-base.less @@ -19,23 +19,28 @@ body { margin: 0; padding: 0; } + ul, ol { padding-left: 2em; } + ul.unstyled { list-style: none; } + img { height: auto; vertical-align: middle; border: 0; } + audio, canvas, video { display: inline-block; } + svg:not(:root) { overflow: hidden; } @@ -51,6 +56,7 @@ html { -ms-text-size-adjust: 100%; text-size-adjust: 100%; } + body { background-color: @base-background; color: @base-color; @@ -73,28 +79,39 @@ label, textarea, caption, details, -figure, -hgroup { +figure { margin-top: 0.75em; margin-bottom: 0; line-height: @line-height; } -h1, .h1-like { + +h1, +.h1-like { font-size: @h1-size; } -h2, .h2-like { + +h2, +.h2-like { font-size: @h2-size; } -h3, .h3-like { + +h3, +.h3-like { font-size: @h3-size; } -h4, .h4-like { + +h4, +.h4-like { font-size: @h4-size; } -h5, .h5-like { + +h5, +.h5-like { font-size: @h5-size; } -h6, .h6-like { + +h6, +.h6-like { font-size: @h6-size; } @@ -102,15 +119,19 @@ h6, .h6-like { .smaller { .em(@base-font-size - 4); } + .small { .em(@base-font-size - 2); } + .big { .em(@base-font-size + 2); } + .bigger { .em(@base-font-size + 4); } + .biggest { .em(@base-font-size + 6); } @@ -153,38 +174,51 @@ sup { /* == hiding content */ /* ----------------------------- */ +/* hidden but not for assistance tools, Yahoo! method */ .visually-hidden { - position: absolute !important; - clip: rect(1px, 1px, 1px, 1px); - overflow: hidden; - height: 1px; width: 1px; + position: absolute !important; + border: 0 !important; + height: 1px !important; + width: 1px !important; + padding: 0 !important; + overflow: hidden !important; + clip: rect(1px, 1px, 1px, 1px) !important; } + body > script { display: none !important; } -@media print { - .no-print { - display: none; - } -} + @media (max-width: @small-screen) { .no-small-screen { display: none; } } + @media (min-width: @large-screen) { .no-large-screen { display: none; } } + /* ----------------------------- */ /* == browsers consistency */ /* ----------------------------- */ /* avoid top margins on first content element */ -p, .p-like, ul, ol, dl, -blockquote, pre, -h1, h2, h3, h4, h5, h6 { +p, +.p-like, +ul, +ol, +dl, +blockquote, +pre, +h1, +h2, +h3, +h4, +h5, +h6 { &:first-child { margin-top: 0; } @@ -200,13 +234,22 @@ li ol { } /* max values */ -img, table, td, blockquote, code, pre, textarea, input, video { +img, +table, +td, +blockquote, +code, +pre, +textarea, +input, +video { max-width: 100%; } /* margin-bottom on tables */ -table { margin-bottom: @medium-value; } - +table { + margin-bottom: @medium-value; +} /* ----------------------------- */ /* ==layout and modules */ @@ -241,6 +284,7 @@ table { margin-bottom: @medium-value; } table-layout: fixed; width: 100%; } + .row > *, .col { display: table-cell; @@ -253,7 +297,6 @@ table { margin-bottom: @medium-value; } vertical-align: top; } - /* alignments (blocks and inline) */ /* ------------------------------ */ @@ -262,65 +305,169 @@ table { margin-bottom: @medium-value; } .start { float: left; } + img.left, img.start { margin-right: @small-value; } + /* right (or ending) elements */ .right, .end { float: right; } + img.right, img.end { margin-left: @small-value; } -img.left, img.right, -img.start, img.end { + +img.left, +img.right, +img.start, +img.end { 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 & when (@enable-helpers-width = true) { /* 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%; } + .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; } + .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 & when (@enable-helpers-spacing = true) { /* spacing helpers @@ -328,46 +475,164 @@ img.start, img.end { a,t,r,b,l = all,top,right,bottom,left s,m,l,n = small, medium, large, none */ - .man { margin: 0; } - .pan { padding: 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; } + .man { + margin: 0; + } + + .pan { + padding: 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; + } + + .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; + } - .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; + } + } diff --git a/less/02-grids.less b/less/02-grids.less index 4215617..262fcfb 100644 --- a/less/02-grids.less +++ b/less/02-grids.less @@ -7,52 +7,97 @@ /* grids inspired from SUIT https://github.com/suitcss/suit */ -.grid { /* overall container of grids */ +/* overall container of grids */ +.grid { overflow: hidden; } -.grid > * { /* global styles for direct child ex. .grid3 */ + +/* global styles for direct child ex. .grid3 */ +/* 1- gutter value */ +.grid > * { display: block; padding: 0; - margin-left: -@gutter; /* gutter value */ + margin-left: -@gutter; /* 1 */ text-align: left; } -.grid > * > * { /* global styles for each "cell" */ + +/* global styles for each "cell" */ +/* 1- gutter value */ +.grid > * > * { display: inline-block; - padding-left: @gutter; /* gutter value */ + padding-left: @gutter; /* 1 */ margin-left: 0; vertical-align: top; } + /* whitespace fixing for modern browsers including IE9+ */ +/* 1- fallback for Opera Mini */ :root .grid { font-size: 0; } :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); } + /* Opera hack */ .opera:-o-prefocus, .grid > * { word-spacing: -0.43em; } -.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%;} + +.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 > * + * { + width: 66.666%; +} + .grid1-2 > *:first-child, -.grid2-1 > * + * { width: 33.333%; } +.grid2-1 > * + * { + width: 33.333%; +} + .grid1-3 > *:first-child, -.grid3-1 > * + * { width: 25%; } +.grid3-1 > * + * { + width: 25%; +} + .grid3-1 > *:first-child, -.grid1-3 > * + * { width: 75%; } +.grid1-3 > * + * { + width: 75%; +} /* Responsiv-o-matic */ @media (max-width: @large-screen) { @@ -60,7 +105,9 @@ .grid6 > *, .grid8 > *, .grid10 > *, - .grid12 > * {width: 33.333%} + .grid12 > * { + width: 33.333%; + } } @media (max-width: @small-screen) { .grid3 > *, @@ -69,10 +116,14 @@ .grid6 > *, .grid8 > *, .grid10 > *, - .grid12 > * {width: 50%} + .grid12 > * { + width: 50%; + } } @media (max-width: @tiny-screen) { - .grid > * > * {width: 100% !important} + .grid > * > * { + width: 100% !important; + } } /* ---------------------------------- */ @@ -82,46 +133,79 @@ /* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */ -[class*="autogrid"] { /* container of autogrids */ +/* container of autogrids */ +[class*="autogrid"] { text-align: justify; } + [class*="autogrid"]:after { content: ""; display: inline-block; width: 100%; } + [class*="autogrid"] > * { display: inline-block; vertical-align: top; text-align: left; } + /* whitespace fixing for modern browsers including IE9+ */ +/* 1- fallback for Opera Mini */ :root [class*="autogrid"] { font-size: 0; } + :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); } + /* Opera hack */ [class*="autogrid"]:-o-prefocus { word-spacing: -0.43em; } -.autogrid2 > * {width: 49%} -.autogrid3 > * {width: 32%} -.autogrid4 > * {width: 23.6%} -.autogrid5 > * {width: 19%} -.autogrid6 > * {width: 15%} -.autogrid8 > * {width: 10.8%} -.autogrid10 > * {width: 9%} -.autogrid12 > * {width: 6.4%} + +.autogrid2 > * { + width: 49%; +} + +.autogrid3 > * { + width: 32%; +} + +.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) { .autogrid5 > *, .autogrid6 > *, .autogrid8 > *, .autogrid10 > *, - .autogrid12 > * {width: 32%} + .autogrid12 > * { + width: 32%; + } } @media (max-width: @small-screen) { @@ -129,9 +213,13 @@ .autogrid6 > *, .autogrid8 > *, .autogrid10 > *, - .autogrid12 > * {width: 49%} + .autogrid12 > * { + width: 49%; + } } @media (max-width: @tiny-screen) { - [class*="autogrid"] > * {width: 100%} -} \ No newline at end of file + [class*="autogrid"] > * { + width: 100%; + } +} diff --git a/less/03-tables.less b/less/03-tables.less index bb7d30b..0bff8a1 100644 --- a/less/03-tables.less +++ b/less/03-tables.less @@ -12,18 +12,22 @@ table, vertical-align: top; border: 1px solid #ccc; } + .table { display: table; } + table#recaptcha_table, table.table-auto { table-layout:auto; } + caption { padding: @small-value; color: #555; font-style: italic; } + td, th { padding: 0.3em 0.8em; @@ -32,4 +36,4 @@ th { min-width: @medium-value; cursor: default; text-align: left; -} \ No newline at end of file +} diff --git a/less/04-forms.less b/less/04-forms.less index 0728b0c..84c0ff8 100644 --- a/less/04-forms.less +++ b/less/04-forms.less @@ -18,6 +18,7 @@ form, fieldset { border: none; } + input, button, select, @@ -27,15 +28,18 @@ label, font-family: inherit; font-size: inherit; } + label { display: inline-block; vertical-align: middle; cursor: pointer; } + legend { border: 0; white-space: normal; } + textarea { min-height: 5em; vertical-align: top; @@ -43,13 +47,16 @@ textarea { font-size: inherit; resize: vertical; } + +/* clickable input types in iOS */ button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; - -webkit-appearance: button; /* clickable input types in iOS */ + -webkit-appearance: button; } + input[type="search"] { -webkit-appearance: textfield; } @@ -64,9 +71,11 @@ 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; @@ -79,4 +88,4 @@ input[type='reset']::-moz-focus-inner, input[type='submit']::-moz-focus-inner { border: 0; padding: 0; -} \ No newline at end of file +} diff --git a/less/05-icons.less b/less/05-icons.less index fd5b9b4..61ed472 100644 --- a/less/05-icons.less +++ b/less/05-icons.less @@ -21,61 +21,73 @@ @media (min-device-width: @small-screen) { .icon:before, .icon.after:after { - font: 1em/0.6 sans-serif; - -webkit-transform: rotateZ(0.05deg); + 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"; @@ -84,6 +96,7 @@ position: relative; top: -0.15em; } + .icon-bracket2:before, .icon-bracket2.after:after { content: "\203A"; @@ -92,45 +105,54 @@ 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"; diff --git a/less/06-rwd.less b/less/06-rwd.less index 6bb4a96..dff25ec 100644 --- a/less/06-rwd.less +++ b/less/06-rwd.less @@ -6,6 +6,7 @@ @media (min-width: @small-screen) { /* 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 */ } @@ -17,9 +18,18 @@ @media (min-width: @large-screen) { /* layouts for large screens */ - .large-hidden { display: none !important; } - .large-visible { display: block !important; } - .large-no-float {float: none; } + .large-hidden { + display: none !important; + } + + .large-visible { + display: block !important; + } + + .large-no-float { + float: none; + } + .large-inbl { display: inline-block; float: none; @@ -36,11 +46,26 @@ } /* 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-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; @@ -53,7 +78,9 @@ } /* margins for large screens */ - .large-man { margin: 0 !important; } + .large-man { + margin: 0 !important; + } } @media (max-width: @small-screen) { @@ -69,9 +96,18 @@ } /* layouts for small screens */ - .small-hidden { display: none !important; } - .small-visible { display: block !important; } - .small-no-float {float: none; } + .small-hidden { + display: none !important; + } + + .small-visible { + display: block !important; + } + + .small-no-float { + float: none; + } + .small-inbl { display: inline-block; float: none; @@ -88,11 +124,26 @@ } /* 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-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; @@ -103,9 +154,15 @@ margin-right: 0 !important; border: 0; } + /* margins for small screens */ - .small-man { margin: 0 !important; } - .small-pan { padding: 0 !important; } + .small-man { + margin: 0 !important; + } + + .small-pan { + padding: 0 !important; + } } @media (max-width: @tiny-screen) { @@ -122,49 +179,81 @@ 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-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; } + + 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-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; @@ -175,7 +264,13 @@ margin-right: 0 !important; border: 0; } + /* margins for tiny screens */ - .tiny-man { margin: 0 !important; } - .tiny-pan { padding: 0 !important; } + .tiny-man { + margin: 0 !important; + } + + .tiny-pan { + padding: 0 !important; + } } diff --git a/less/07-flexbox.less b/less/07-flexbox.less index cd69d72..5b9ec03 100644 --- a/less/07-flexbox.less +++ b/less/07-flexbox.less @@ -4,21 +4,27 @@ Tutorial: http://knacss.com/demos/tutoriel.html#flex */ .flex { display : flex; } + .flex-h { flex-direction: row; } + .flex-v { flex-direction: column; } + .flex-fluid { flex: 1; } + .flex-start { order : -1; } + .flex-mid { order : 1; } + .flex-end { order : 42; -} \ No newline at end of file +} diff --git a/less/08-print.less b/less/08-print.less index c954185..e735542 100644 --- a/less/08-print.less +++ b/less/08-print.less @@ -1,11 +1,13 @@ @import "00-config"; /* quick print reset */ @media print { + * { background: transparent !important; box-shadow: none !important; text-shadow: none !important; } + body { width: auto !important; margin: auto !important; @@ -14,6 +16,7 @@ background-color: #fff !important; color: #333 !important; } + p, h1, h2, @@ -27,44 +30,58 @@ color: #000 !important; margin: auto !important; } + .print { - display: block; /* displaying .print elements */ + display: block; } + + .no-print { + display: none; + } + img { - -webkit-filter: grayscale(100%); - -moz-filter: grayscale(100%); - -ms-filter: grayscale(100%); - -o-filter: grayscale(100%); filter: grayscale(100%); } + + /* no orphans, no widows */ p, blockquote { - orphans: 3; /* no orphans */ - widows: 3; /* no widows */ + orphans: 3; + widows: 3; } + + /* no breaks inside these elements */ blockquote, ul, ol { - page-break-inside: avoid; /* no breaks inside these elements */ + page-break-inside: avoid; } + + /* page break before main headers */ h1 { - page-break-before: always; /* page break before main headers */ + page-break-before: always; } + + /* no breaks after these elements */ h1, h2, h3, caption { - page-break-after: avoid; /* no breaks after these elements */ + page-break-after: avoid; } + a { color: #000 !important; text-decoration: underline !important; } + + /* displaying URLs */ a[href]:after { - content: " (" attr(href) ")"; /* displaying URLs */ + content: " (" attr(href) ")"; } + a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } -} \ No newline at end of file +} diff --git a/less/09-booleans.less b/less/09-booleans.less index 3c0955f..9835164 100644 --- a/less/09-booleans.less +++ b/less/09-booleans.less @@ -27,9 +27,16 @@ & when (@enable-hyphens = true) { @media (max-width: @small-screen) { /* you shall not pass */ - div, textarea, table, td, th, code, pre, samp { + div, + textarea, + table, + td, + th, + code, + pre, + samp { word-wrap: break-word; hyphens: auto; } } -} \ No newline at end of file +} diff --git a/less/10-gmaps.less b/less/10-gmaps.less index 28c18a8..15cfde4 100644 --- a/less/10-gmaps.less +++ b/less/10-gmaps.less @@ -8,12 +8,14 @@ .gm-style img { height: 100%; } + :not(.gm-style) img { height: auto; } + .gm-style img, .gmnoscreen img, .gmnoprint img { max-width: none !important; } -} \ No newline at end of file +} diff --git a/less/11-ie.less b/less/11-ie.less index e161f47..a0cc8f8 100644 --- a/less/11-ie.less +++ b/less/11-ie.less @@ -9,29 +9,36 @@ @em: @h1-size * 10 / @base-font-size; font-size: unit(round(@em,2), em); } + .ie678 h2, .ie678 .h2-like { @em: @h2-size * 10 / @base-font-size; font-size: unit(round(@em,2), em); } + .ie678 h3, .ie678 .h3-like { @em: @h3-size * 10 / @base-font-size; font-size: unit(round(@em,2), em); } + .ie678 h4, .ie678 .h4-like { @em: @h4-size * 10 / @base-font-size; font-size: unit(round(@em,2), em); } + .ie678 h5, .ie678 .h5-like { @em: @h5-size * 10 / @base-font-size; font-size: unit(round(@em,2), em); } + .ie678 h6, .ie678 .h6-like { @em: @h6-size * 10 / @base-font-size; font-size: unit(round(@em,2), em); } + .ie678 img { width: auto; /* @bugfix for IE8 */ } + .ie678 .gm-style img { height: 100%; } @@ -44,6 +51,7 @@ .col { *zoom: 1; } + /* inline-block and table-cell for IE6/IE7 */ /* warning: .col needs width on IE6/IE7 */ .btn, @@ -52,6 +60,7 @@ *display: inline; *zoom: 1; } + .visually-hidden { *clip: rect(1px 1px 1px 1px); } @@ -62,6 +71,7 @@ letter-spacing: -0.31em; text-rendering: optimizespeed; } + .ie8 .grid > * > *, .ie8 [class*="autogrid"] > * > *{ letter-spacing: normal; @@ -77,12 +87,15 @@ } /* forms */ + /* Corrects excess space around these inputs in IE8/9 */ input[type="checkbox"], 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 { - overflow: auto; /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */ + overflow: auto; } /* Active box-sizing for IE6/IE7 */ @@ -92,4 +105,4 @@ behavior: url(/lib/box-sizing-polyfill/boxsizing.htc); } */ -} \ No newline at end of file +} diff --git a/less/12-styling.less b/less/12-styling.less index f93d30e..25aca56 100644 --- a/less/12-styling.less +++ b/less/12-styling.less @@ -6,56 +6,70 @@ // Styling boolean & when (@enable-styling = true) { /* styling elements */ - code, kbd, mark { + code, + kbd, + mark { border-radius: 2px; } + kbd { padding: 0 2px; border: 1px solid #999; } + code { padding: 2px 4px; background: rgba(0,0,0,0.04); color: #b11; } + pre code { padding: none; background: none; color: inherit; border-radius: 0; } + mark { padding:2px 4px; background: #ff0; } + sup, sub { vertical-align: 0; position: relative; } + sup { bottom: 1ex; } + sub { top: 0.5ex; } + blockquote { margin-left: 0; padding-left: 1em; border-left: 4px solid rgba(0,0,0,0.15); font-style: italic; } + q { font-style: normal; } + q, .q { quotes: "“\00a0" "\00a0”"; } + q:lang(fr), .q:lang(fr) { quotes: "«\00a0" "\00a0»"; } + hr { display: block; clear: both; @@ -66,14 +80,17 @@ color: #ccc; background-color: #ccc; } + /* 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; } @@ -83,9 +100,11 @@ border: 0; border-right: 1px solid #ccc; } + .alternate-vert tr > :first-child { border-bottom: 0; } + .alternate-vert tr > * + * { border-top: 1px solid #ccc; } @@ -101,4 +120,4 @@ background: #eee; background: rgba(0, 0, 0, .05); } -} \ No newline at end of file +} diff --git a/less/knacss.less b/less/knacss.less index 9341033..d7ea46f 100644 --- a/less/knacss.less +++ b/less/knacss.less @@ -23,4 +23,4 @@ /* 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 +/* @import "my-styles.less"; */