Ménage de printemps
Gros nettoyage de tous les espaces et tabulations disgrâcieux
This commit is contained in:
raphaelgoettter
parent
1b9e0bf9f5
commit
55709a882d
|
|
@ -1,55 +1,55 @@
|
||||||
// Config file : variables, mixins, ...
|
// Config file and project variables
|
||||||
|
|
||||||
// font sizes
|
// font sizes
|
||||||
@base-font-size : 14px; // if "14px" then 1em = 14px
|
@base-font-size : 14px; // if "14px" then 1em = 14px
|
||||||
@line-height : 1.5; // equiv line-height 1.5
|
@line-height : 1.5; // equiv line-height 1.5
|
||||||
@h1-size : 3.2rem; // equiv "32px"
|
@h1-size : 3.2rem; // equiv "32px"
|
||||||
@h2-size : 2.8rem; // equiv "28px"
|
@h2-size : 2.8rem; // equiv "28px"
|
||||||
@h3-size : 2.4rem; // equiv "24px"
|
@h3-size : 2.4rem; // equiv "24px"
|
||||||
@h4-size : 2.0rem; // equiv "20px"
|
@h4-size : 2.0rem; // equiv "20px"
|
||||||
@h5-size : 1.8rem; // equiv "18px"
|
@h5-size : 1.8rem; // equiv "18px"
|
||||||
@h6-size : 1.6rem; // equiv "16px"
|
@h6-size : 1.6rem; // equiv "16px"
|
||||||
|
|
||||||
// font stacks
|
// font stacks
|
||||||
@font-stack-common : Helvetica, Arial, sans-serif; // common font
|
@font-stack-common : Helvetica, Arial, sans-serif; // common font
|
||||||
@font-stack-headings : Helvetica, Arial, sans-serif; // headings font
|
@font-stack-headings : Helvetica, Arial, sans-serif; // headings font
|
||||||
@font-stack-monospace : Consolas, 'DejaVu Sans Mono', Courier, monospace; // monospace font
|
@font-stack-monospace : Consolas, "DejaVu Sans Mono", Courier, monospace; // monospace font
|
||||||
@font-stack-universal : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack
|
@font-stack-universal : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack
|
||||||
|
|
||||||
// font colors
|
// font colors
|
||||||
@base-color : #000; // text color on body and content
|
@base-color : #000; // text color on body and content
|
||||||
@primary-color : #000; // text color on primary elements
|
@primary-color : #000; // text color on primary elements
|
||||||
@secondary-color : #000; // text color on secondary elements
|
@secondary-color : #000; // text color on secondary elements
|
||||||
@headings-color : #000; // text color on headings
|
@headings-color : #000; // text color on headings
|
||||||
@base-color-link : #333; // base links color
|
@base-color-link : #333; // base links color
|
||||||
@base-color-link-hover : #000; // base hovered/focused links color
|
@base-color-link-hover : #000; // base hovered/focused links color
|
||||||
|
|
||||||
// backgrounds
|
// backgrounds
|
||||||
@base-background : #fff; // body background color
|
@base-background : #fff; // body background color
|
||||||
@primary-background : #fff; // primary elements background color
|
@primary-background : #fff; // primary elements background color
|
||||||
@secondary-background : #fff; // secondary elements background color
|
@secondary-background : #fff; // secondary elements background color
|
||||||
|
|
||||||
// spacings (choose unit you prefer)
|
// spacings (choose unit you prefer)
|
||||||
@tiny-value : 5px; // tiny value for margins / paddings
|
@tiny-value : 5px; // tiny value for margins / paddings
|
||||||
@small-value : 10px; // small value for margins / paddings
|
@small-value : 10px; // small value for margins / paddings
|
||||||
@medium-value : 20px; // medium value for margins / paddings
|
@medium-value : 20px; // medium value for margins / paddings
|
||||||
@large-value : 40px; // large value for margins / paddings
|
@large-value : 40px; // large value for margins / paddings
|
||||||
@extra-large-value : 80px; // extra large value for margins / paddings
|
@extra-large-value : 80px; // extra large value for margins / paddings
|
||||||
@ultra-large-value : 160px; // ultra large value for margins / paddings
|
@ultra-large-value : 160px; // ultra large value for margins / paddings
|
||||||
|
|
||||||
// breakpoints (choose unit you prefer)
|
// breakpoints (choose unit you prefer)
|
||||||
@tiny-screen : 480px; // tiny screens media query (less than 480px)
|
@tiny-screen : 480px; // tiny screens media query (less than 480px)
|
||||||
@small-screen : 768px; // screens between 481px and 768px
|
@small-screen : 768px; // screens between 481px and 768px
|
||||||
@medium-screen : 1024px; // screens between 769px and 1024px
|
@medium-screen : 1024px; // screens between 769px and 1024px
|
||||||
@large-screen : 1280px; // screens between 1025px and 1280px
|
@large-screen : 1280px; // screens between 1025px and 1280px
|
||||||
@extra-large-screen : 1600px; // screens between 1281px and 1600px
|
@extra-large-screen : 1600px; // screens between 1281px and 1600px
|
||||||
@ultra-large-screen : 1920px; // ultra large screens
|
@ultra-large-screen : 1920px; // ultra large screens
|
||||||
|
|
||||||
// misc (choose unit you prefer)
|
// misc (choose unit you prefer)
|
||||||
@gutter : 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
@gutter : 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
||||||
|
|
||||||
// LESS mixins : don't touch or you'll be banned ;)
|
// LESS mixins : don't touch or you'll be banned ;)
|
||||||
// px to em/rem
|
// px to em/rem
|
||||||
.rem(@size, @bf: @base-font-size){
|
.rem(@size, @bf: @base-font-size){
|
||||||
@rem: @size / 10;
|
@rem: @size / 10;
|
||||||
font-size: unit(round(@base-font-size * @size /10), px);
|
font-size: unit(round(@base-font-size * @size /10), px);
|
||||||
|
|
|
||||||
|
|
@ -62,7 +62,7 @@ html {
|
||||||
|
|
||||||
/* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
|
/* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
|
||||||
/* thanks to @guardian, @victorbritopro and @eQRoeil */
|
/* thanks to @guardian, @victorbritopro and @eQRoeil */
|
||||||
font-size: calc(1em * 0.625);
|
font-size: calc(1em * 0.625);
|
||||||
|
|
||||||
/* disallow text zooming on orientation change (non standard property) */
|
/* disallow text zooming on orientation change (non standard property) */
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
|
|
@ -76,7 +76,7 @@ body {
|
||||||
|
|
||||||
background-color: @base-background;
|
background-color: @base-background;
|
||||||
color: @base-color;
|
color: @base-color;
|
||||||
font-family: @font-stack-common;
|
font-family: @font-stack-common;
|
||||||
line-height: @line-height;
|
line-height: @line-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -100,7 +100,7 @@ th,
|
||||||
label,
|
label,
|
||||||
textarea,
|
textarea,
|
||||||
caption,
|
caption,
|
||||||
details,
|
details,
|
||||||
figure {
|
figure {
|
||||||
margin-top: 0.75em;
|
margin-top: 0.75em;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
@ -160,12 +160,12 @@ h6,
|
||||||
.em(@base-font-size + 6);
|
.em(@base-font-size + 6);
|
||||||
}
|
}
|
||||||
|
|
||||||
code,
|
code,
|
||||||
pre,
|
pre,
|
||||||
samp,
|
samp,
|
||||||
kbd {
|
kbd {
|
||||||
/* IE fix */
|
/* IE fix */
|
||||||
white-space: pre-line;
|
white-space: pre-line;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
font-family: @font-stack-monospace;
|
font-family: @font-stack-monospace;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
|
|
@ -197,14 +197,14 @@ sup {
|
||||||
/* ----------------------------- */
|
/* ----------------------------- */
|
||||||
|
|
||||||
/* hidden but not for an assistive technology like a screen reader, Yahoo! method */
|
/* hidden but not for an assistive technology like a screen reader, Yahoo! method */
|
||||||
.visually-hidden {
|
.visually-hidden {
|
||||||
position: absolute !important;
|
position: absolute !important;
|
||||||
border: 0 !important;
|
border: 0 !important;
|
||||||
height: 1px !important;
|
height: 1px !important;
|
||||||
width: 1px !important;
|
width: 1px !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
overflow: hidden !important;
|
overflow: hidden !important;
|
||||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > script {
|
body > script {
|
||||||
|
|
@ -229,17 +229,17 @@ body > script {
|
||||||
|
|
||||||
/* avoid top margins on first content element */
|
/* avoid top margins on first content element */
|
||||||
p,
|
p,
|
||||||
.p-like,
|
.p-like,
|
||||||
ul,
|
ul,
|
||||||
ol,
|
ol,
|
||||||
dl,
|
dl,
|
||||||
blockquote,
|
blockquote,
|
||||||
pre,
|
pre,
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
|
@ -256,14 +256,14 @@ li ol {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* max values */
|
/* max values */
|
||||||
img,
|
img,
|
||||||
table,
|
table,
|
||||||
td,
|
td,
|
||||||
blockquote,
|
blockquote,
|
||||||
code,
|
code,
|
||||||
pre,
|
pre,
|
||||||
textarea,
|
textarea,
|
||||||
input,
|
input,
|
||||||
video {
|
video {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -345,23 +345,23 @@ img.end {
|
||||||
margin-left: @small-value;
|
margin-left: @small-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
img.left,
|
img.left,
|
||||||
img.right,
|
img.right,
|
||||||
img.start,
|
img.start,
|
||||||
img.end {
|
img.end {
|
||||||
margin-bottom: @tiny-value;
|
margin-bottom: @tiny-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.center {
|
.center {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.txtleft {
|
.txtleft {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.txtright {
|
.txtright {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,113 +12,113 @@
|
||||||
width: 20%;
|
width: 20%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w25 {
|
.w25 {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w30 {
|
.w30 {
|
||||||
width: 30%;
|
width: 30%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w33 {
|
.w33 {
|
||||||
width: 33.3333%;
|
width: 33.3333%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w40 {
|
.w40 {
|
||||||
width: 40%;
|
width: 40%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w50 {
|
.w50 {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w60 {
|
.w60 {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w66 {
|
.w66 {
|
||||||
width: 66.6666%;
|
width: 66.6666%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w70 {
|
.w70 {
|
||||||
width: 70%;
|
width: 70%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w75 {
|
.w75 {
|
||||||
width: 75%;
|
width: 75%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w80 {
|
.w80 {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w90 {
|
.w90 {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w100 {
|
.w100 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.w50p {
|
.w50p {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w100p {
|
.w100p {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w150p {
|
.w150p {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w200p {
|
.w200p {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w300p {
|
.w300p {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w400p {
|
.w400p {
|
||||||
width: 400px;
|
width: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w500p {
|
.w500p {
|
||||||
width: 500px;
|
width: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w600p {
|
.w600p {
|
||||||
width: 600px;
|
width: 600px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w700p {
|
.w700p {
|
||||||
width: 700px;
|
width: 700px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w800p {
|
.w800p {
|
||||||
width: 800px;
|
width: 800px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w960p {
|
.w960p {
|
||||||
width: 960px;
|
width: 960px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mw960p {
|
.mw960p {
|
||||||
max-width: 960px;
|
max-width: 960px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w1140p {
|
.w1140p {
|
||||||
width: 1140px;
|
width: 1140px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mw1140p {
|
.mw1140p {
|
||||||
max-width: 1140px;
|
max-width: 1140px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wauto {
|
.wauto {
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* spacing helpers
|
/* spacing helpers
|
||||||
|
|
@ -126,162 +126,172 @@ p,m = padding,margin
|
||||||
a,t,r,b,l = all,top,right,bottom,left
|
a,t,r,b,l = all,top,right,bottom,left
|
||||||
s,m,l,n = small, medium, large, none
|
s,m,l,n = small, medium, large, none
|
||||||
*/
|
*/
|
||||||
.man {
|
.man,
|
||||||
margin: 0;
|
.ma0 {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan {
|
.pan,
|
||||||
padding: 0;
|
.pa0 {
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mas {
|
.mas {
|
||||||
margin: @small-value;
|
margin: @small-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mam {
|
.mam {
|
||||||
margin: @medium-value;
|
margin: @medium-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mal {
|
.mal {
|
||||||
margin: @large-value;
|
margin: @large-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pas {
|
.pas {
|
||||||
padding: @small-value;
|
padding: @small-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pam {
|
.pam {
|
||||||
padding: @medium-value;
|
padding: @medium-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pal {
|
.pal {
|
||||||
padding: @large-value;
|
padding: @large-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mtn {
|
.mtn,
|
||||||
margin-top: 0;
|
.mt0 {
|
||||||
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mts {
|
.mts {
|
||||||
margin-top: @small-value;
|
margin-top: @small-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mtm {
|
.mtm {
|
||||||
margin-top: @medium-value;
|
margin-top: @medium-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mtl {
|
.mtl {
|
||||||
margin-top: @large-value;
|
margin-top: @large-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mrn {
|
.mrn,
|
||||||
margin-right: 0;
|
.mr0 {
|
||||||
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mrs {
|
.mrs {
|
||||||
margin-right: @small-value;
|
margin-right: @small-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mrm {
|
.mrm {
|
||||||
margin-right: @medium-value;
|
margin-right: @medium-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mrl {
|
.mrl {
|
||||||
margin-right: @large-value;
|
margin-right: @large-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mbn {
|
.mbn,
|
||||||
margin-bottom: 0;
|
.mb0 {
|
||||||
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mbs {
|
.mbs {
|
||||||
margin-bottom: @small-value;
|
margin-bottom: @small-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mbm {
|
.mbm {
|
||||||
margin-bottom: @medium-value;
|
margin-bottom: @medium-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mbl {
|
.mbl {
|
||||||
margin-bottom: @large-value;
|
margin-bottom: @large-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mln {
|
.mln,
|
||||||
margin-left: 0;
|
.ml0 {
|
||||||
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mls {
|
.mls {
|
||||||
margin-left: @small-value;
|
margin-left: @small-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mlm {
|
.mlm {
|
||||||
margin-left: @medium-value;
|
margin-left: @medium-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mll {
|
.mll {
|
||||||
margin-left: @large-value;
|
margin-left: @large-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ptn {
|
.ptn,
|
||||||
padding-top: 0;
|
.pt0 {
|
||||||
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pts {
|
.pts {
|
||||||
padding-top: @small-value;
|
padding-top: @small-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ptm {
|
.ptm {
|
||||||
padding-top: @medium-value;
|
padding-top: @medium-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ptl {
|
.ptl {
|
||||||
padding-top: @large-value;
|
padding-top: @large-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prn {
|
.prn,
|
||||||
padding-right: 0;
|
.pr0 {
|
||||||
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prs {
|
.prs {
|
||||||
padding-right: @small-value;
|
padding-right: @small-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prm {
|
.prm {
|
||||||
padding-right: @medium-value;
|
padding-right: @medium-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prl {
|
.prl {
|
||||||
padding-right: @large-value;
|
padding-right: @large-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pbn {
|
.pbn,
|
||||||
padding-bottom: 0;
|
.pb0 {
|
||||||
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pbs {
|
.pbs {
|
||||||
padding-bottom: @small-value;
|
padding-bottom: @small-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pbm {
|
.pbm {
|
||||||
padding-bottom: @medium-value;
|
padding-bottom: @medium-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pbl {
|
.pbl {
|
||||||
padding-bottom: @large-value;
|
padding-bottom: @large-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pln {
|
.pln,
|
||||||
padding-left: 0;
|
.pl0 {
|
||||||
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pls {
|
.pls {
|
||||||
padding-left: @small-value;
|
padding-left: @small-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.plm {
|
.plm {
|
||||||
padding-left: @medium-value;
|
padding-left: @medium-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pll {
|
.pll {
|
||||||
padding-left: @large-value;
|
padding-left: @large-value;
|
||||||
}
|
}
|
||||||
|
|
@ -6,24 +6,22 @@
|
||||||
/* grids inspired from SUIT https://github.com/suitcss/suit */
|
/* grids inspired from SUIT https://github.com/suitcss/suit */
|
||||||
|
|
||||||
/* overall container of grids */
|
/* overall container of grids */
|
||||||
.grid {
|
.grid {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* global styles for direct child ex. .grid3 */
|
/* global styles for direct child ex. .grid3 */
|
||||||
.grid > * {
|
.grid > * {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
/* gutter value */
|
margin-left: -@gutter; /* gutter value */
|
||||||
margin-left: -@gutter;
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* global styles for each "cell" */
|
/* global styles for each "cell" */
|
||||||
.grid > * > * {
|
.grid > * > * {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
/* gutter value */
|
padding-left: @gutter; /* gutter value */
|
||||||
padding-left: @gutter;
|
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
@ -31,8 +29,7 @@
|
||||||
/* whitespace fixing for modern browsers including IE9+ */
|
/* whitespace fixing for modern browsers including IE9+ */
|
||||||
:root .grid {
|
:root .grid {
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
/* fallback for IE9+ */
|
text-justify: distribute-all-lines; /* fallback for IE9+ */
|
||||||
text-justify: distribute-all-lines;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:root .grid > * > * {
|
:root .grid > * > * {
|
||||||
|
|
@ -81,23 +78,23 @@
|
||||||
|
|
||||||
/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */
|
/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */
|
||||||
.grid2-1 > *:first-child,
|
.grid2-1 > *:first-child,
|
||||||
.grid1-2 > * + * {
|
.grid1-2 > * + * {
|
||||||
width: 66.666%;
|
width: 66.666%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid1-2 > *:first-child,
|
.grid1-2 > *:first-child,
|
||||||
.grid2-1 > * + * {
|
.grid2-1 > * + * {
|
||||||
width: 33.333%;
|
width: 33.333%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid1-3 > *:first-child,
|
.grid1-3 > *:first-child,
|
||||||
.grid3-1 > * + * {
|
.grid3-1 > * + * {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid3-1 > *:first-child,
|
.grid3-1 > *:first-child,
|
||||||
.grid1-3 > * + * {
|
.grid1-3 > * + * {
|
||||||
width: 75%;
|
width: 75%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ---------------------------------- */
|
/* ---------------------------------- */
|
||||||
|
|
@ -108,14 +105,14 @@
|
||||||
/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
|
/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
|
||||||
|
|
||||||
/* container of autogrids */
|
/* container of autogrids */
|
||||||
[class*="autogrid"] {
|
[class*="autogrid"] {
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
}
|
}
|
||||||
|
|
||||||
[class*="autogrid"]:after {
|
[class*="autogrid"]:after {
|
||||||
content: "";
|
content: "";
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
[class*="autogrid"] > * {
|
[class*="autogrid"] > * {
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@ table.table-auto {
|
||||||
caption {
|
caption {
|
||||||
padding: @small-value;
|
padding: @small-value;
|
||||||
color: #555;
|
color: #555;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
td,
|
td,
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,7 @@ label,
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
||||||
|
|
@ -70,10 +70,10 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-arrow1:before,
|
.icon-arrow1:before,
|
||||||
.icon-arrow1.after:after {
|
.icon-arrow1.after:after {
|
||||||
content: "\2192";
|
content: "\2192";
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -0.15em;
|
top: -0.15em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -92,7 +92,7 @@
|
||||||
content: "\2039";
|
content: "\2039";
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 1.6em;
|
font-size: 1.6em;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -0.15em;
|
top: -0.15em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -101,7 +101,7 @@
|
||||||
content: "\203A";
|
content: "\203A";
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 1.6em;
|
font-size: 1.6em;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -0.15em;
|
top: -0.15em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -17,16 +17,16 @@
|
||||||
@media (min-width: (@medium-screen + 1)) {
|
@media (min-width: (@medium-screen + 1)) {
|
||||||
|
|
||||||
/* layouts for large screens */
|
/* layouts for large screens */
|
||||||
.large-hidden {
|
.large-hidden {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.large-visible {
|
.large-visible {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.large-no-float {
|
.large-no-float {
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.large-inbl {
|
.large-inbl {
|
||||||
|
|
@ -34,35 +34,37 @@
|
||||||
float: none;
|
float: none;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
.large-row {
|
.large-row {
|
||||||
display: table;
|
display: table;
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.large-col {
|
.large-col {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* widths for large screens */
|
/* widths for large screens */
|
||||||
.large-w25 {
|
.large-w25 {
|
||||||
width: 25% !important;
|
width: 25% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.large-w33 {
|
.large-w33 {
|
||||||
width: 33.3333% !important;
|
width: 33.3333% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.large-w50 {
|
.large-w50 {
|
||||||
width: 50% !important;
|
width: 50% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.large-w66 {
|
.large-w66 {
|
||||||
width: 66.6666% !important;
|
width: 66.6666% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.large-w75 {
|
.large-w75 {
|
||||||
width: 75% !important;
|
width: 75% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.large-w100,
|
.large-w100,
|
||||||
|
|
@ -73,30 +75,12 @@
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
margin-left: 0 !important;
|
margin-left: 0 !important;
|
||||||
margin-right: 0 !important;
|
margin-right: 0 !important;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* margins for large screens */
|
/* margins for large screens */
|
||||||
.large-man {
|
.large-man {
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
}
|
|
||||||
|
|
||||||
/* grid rwd for large screens */
|
|
||||||
.grid5 > *,
|
|
||||||
.grid6 > *,
|
|
||||||
.grid8 > *,
|
|
||||||
.grid10 > *,
|
|
||||||
.grid12 > * {
|
|
||||||
width: 33.333%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* autogrid rwd for large screens */
|
|
||||||
.autogrid5 > *,
|
|
||||||
.autogrid6 > *,
|
|
||||||
.autogrid8 > *,
|
|
||||||
.autogrid10 > *,
|
|
||||||
.autogrid12 > * {
|
|
||||||
width: 32%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -107,16 +91,16 @@
|
||||||
@media (min-width: (@small-screen + 1)) and (max-width: @medium-screen) {
|
@media (min-width: (@small-screen + 1)) and (max-width: @medium-screen) {
|
||||||
|
|
||||||
/* layouts for medium screens */
|
/* layouts for medium screens */
|
||||||
.medium-hidden {
|
.medium-hidden {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.medium-visible {
|
.medium-visible {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.medium-no-float {
|
.medium-no-float {
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.medium-inbl {
|
.medium-inbl {
|
||||||
|
|
@ -124,35 +108,37 @@
|
||||||
float: none;
|
float: none;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
.medium-row {
|
.medium-row {
|
||||||
display: table;
|
display: table;
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.medium-col {
|
.medium-col {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* widths for medium screens */
|
/* widths for medium screens */
|
||||||
.medium-w25 {
|
.medium-w25 {
|
||||||
width: 25% !important;
|
width: 25% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.medium-w33 {
|
.medium-w33 {
|
||||||
width: 33.3333% !important;
|
width: 33.3333% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.medium-w50 {
|
.medium-w50 {
|
||||||
width: 50% !important;
|
width: 50% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.medium-w66 {
|
.medium-w66 {
|
||||||
width: 66.6666% !important;
|
width: 66.6666% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.medium-w75 {
|
.medium-w75 {
|
||||||
width: 75% !important;
|
width: 75% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.medium-w100,
|
.medium-w100,
|
||||||
|
|
@ -163,12 +149,13 @@
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
margin-left: 0 !important;
|
margin-left: 0 !important;
|
||||||
margin-right: 0 !important;
|
margin-right: 0 !important;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* margins for medium screens */
|
/* margins for medium screens */
|
||||||
.medium-man {
|
.medium-man,
|
||||||
margin: 0 !important;
|
.medium-ma0 {
|
||||||
|
margin: 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -199,19 +186,19 @@
|
||||||
.mw960p {
|
.mw960p {
|
||||||
width: auto;
|
width: auto;
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* layouts for small screens */
|
/* layouts for small screens */
|
||||||
.small-hidden {
|
.small-hidden {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-visible {
|
.small-visible {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-no-float {
|
.small-no-float {
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-inbl {
|
.small-inbl {
|
||||||
|
|
@ -219,55 +206,59 @@
|
||||||
float: none;
|
float: none;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-row {
|
.small-row {
|
||||||
display: table !important;
|
display: table !important;
|
||||||
table-layout: fixed !important;
|
table-layout: fixed !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-col {
|
.small-col {
|
||||||
display: table-cell !important;
|
display: table-cell !important;
|
||||||
vertical-align: top !important;
|
vertical-align: top !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* widths for small screens */
|
/* widths for small screens */
|
||||||
.small-w25 {
|
.small-w25 {
|
||||||
width: 25% !important;
|
width: 25% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-w33 {
|
.small-w33 {
|
||||||
width: 33.3333% !important;
|
width: 33.3333% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-w50 {
|
.small-w50 {
|
||||||
width: 50% !important;
|
width: 50% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-w66 {
|
.small-w66 {
|
||||||
width: 66.6666% !important;
|
width: 66.6666% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-w75 {
|
.small-w75 {
|
||||||
width: 75% !important;
|
width: 75% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-w100,
|
.small-w100,
|
||||||
.small-wauto {
|
.small-wauto {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
float: none !important;
|
float: none !important;
|
||||||
clear: none !important;
|
clear: none !important;
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
margin-left: 0 !important;
|
margin-left: 0 !important;
|
||||||
margin-right: 0 !important;
|
margin-right: 0 !important;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* margins for small screens */
|
/* margins for small screens */
|
||||||
.small-man {
|
.small-man,
|
||||||
margin: 0 !important;
|
.small-ma0 {
|
||||||
|
margin: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-pan {
|
.small-pan,
|
||||||
padding: 0 !important;
|
.small-pa0 {
|
||||||
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* grid rwd for small screens */
|
/* grid rwd for small screens */
|
||||||
|
|
@ -304,18 +295,18 @@
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* layouts for tiny screens */
|
/* layouts for tiny screens */
|
||||||
.tiny-hidden {
|
.tiny-hidden {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tiny-visible {
|
.tiny-visible {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tiny-no-float {
|
.tiny-no-float {
|
||||||
|
|
@ -346,33 +337,33 @@
|
||||||
text-align: left !important;
|
text-align: left !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
thead {
|
thead {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* widths for tiny screens */
|
/* widths for tiny screens */
|
||||||
.tiny-w25 {
|
.tiny-w25 {
|
||||||
width: 25% !important;
|
width: 25% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tiny-w33 {
|
.tiny-w33 {
|
||||||
width: 33.3333% !important;
|
width: 33.3333% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tiny-w50 {
|
.tiny-w50 {
|
||||||
width: 50% !important;
|
width: 50% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tiny-w66 {
|
.tiny-w66 {
|
||||||
width: 66.6666% !important;
|
width: 66.6666% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tiny-w75 {
|
.tiny-w75 {
|
||||||
width: 75% !important;
|
width: 75% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tiny-w100,
|
.tiny-w100,
|
||||||
.tiny-wauto {
|
.tiny-wauto {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
float: none !important;
|
float: none !important;
|
||||||
clear: none !important;
|
clear: none !important;
|
||||||
|
|
@ -383,12 +374,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* margins for tiny screens */
|
/* margins for tiny screens */
|
||||||
.tiny-man {
|
.tiny-man,
|
||||||
margin: 0 !important;
|
.tiny-ma0 {
|
||||||
|
margin: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tiny-pan {
|
.tiny-pan,
|
||||||
padding: 0 !important;
|
.tiny-pa0 {
|
||||||
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* grid rwd for tiny screens */
|
/* grid rwd for tiny screens */
|
||||||
|
|
@ -401,4 +394,3 @@
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -38,14 +38,14 @@
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
filter: grayscale(100%);
|
filter: grayscale(100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* no orphans, no widows */
|
/* no orphans, no widows */
|
||||||
p,
|
p,
|
||||||
blockquote {
|
blockquote {
|
||||||
orphans: 3;
|
orphans: 3;
|
||||||
widows: 3;
|
widows: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -53,12 +53,12 @@
|
||||||
blockquote,
|
blockquote,
|
||||||
ul,
|
ul,
|
||||||
ol {
|
ol {
|
||||||
page-break-inside: avoid;
|
page-break-inside: avoid;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* page break before main headers */
|
/* page break before main headers */
|
||||||
h1 {
|
h1 {
|
||||||
page-break-before: always;
|
page-break-before: always;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* no breaks after these elements */
|
/* no breaks after these elements */
|
||||||
|
|
@ -66,7 +66,7 @@
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
caption {
|
caption {
|
||||||
page-break-after: avoid;
|
page-break-after: avoid;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
@ -76,7 +76,7 @@
|
||||||
|
|
||||||
/* displaying URLs */
|
/* displaying URLs */
|
||||||
a[href]:after {
|
a[href]:after {
|
||||||
content: " (" attr(href) ")";
|
content: " (" attr(href) ")";
|
||||||
}
|
}
|
||||||
|
|
||||||
a[href^="javascript:"]:after,
|
a[href^="javascript:"]:after,
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
// LESS files : chose the ones you need
|
// LESS files : chose the ones you need
|
||||||
@import "_02-helpers"; // width and spacers visually classes
|
@import "_02-helpers"; // width and spacers visually classes
|
||||||
@import "_03-grids"; // grids and autogrids
|
@import "_03-grids"; // grids and autogrids
|
||||||
@import "_04-tables";
|
@import "_04-tables";
|
||||||
@import "_05-forms";
|
@import "_05-forms";
|
||||||
@import "_06-icons"; // UTF-8 icons
|
@import "_06-icons"; // UTF-8 icons
|
||||||
@import "_07-flexbox";
|
@import "_07-flexbox";
|
||||||
|
|
|
||||||
|
|
@ -1,57 +1,57 @@
|
||||||
// Config file : variables, mixins, ...
|
// Config file and project variables
|
||||||
|
|
||||||
// font sizes
|
// font sizes
|
||||||
$base-font-size : 14px; // if "14px" then 1em = 14px
|
$base-font-size : 14px; // if "14px" then 1em = 14px
|
||||||
$line-height : 1.5; // equiv line-height 1.5
|
$line-height : 1.5; // equiv line-height 1.5
|
||||||
$h1-size : 3.2rem; // equiv "32px"
|
$h1-size : 3.2rem; // equiv "32px"
|
||||||
$h2-size : 2.8rem; // equiv "28px"
|
$h2-size : 2.8rem; // equiv "28px"
|
||||||
$h3-size : 2.4rem; // equiv "24px"
|
$h3-size : 2.4rem; // equiv "24px"
|
||||||
$h4-size : 2.0rem; // equiv "20px"
|
$h4-size : 2.0rem; // equiv "20px"
|
||||||
$h5-size : 1.8rem; // equiv "18px"
|
$h5-size : 1.8rem; // equiv "18px"
|
||||||
$h6-size : 1.6rem; // equiv "16px"
|
$h6-size : 1.6rem; // equiv "16px"
|
||||||
|
|
||||||
// font stacks
|
// font stacks
|
||||||
$font-stack-common : Helvetica, Arial, sans-serif; // common font
|
$font-stack-common : Helvetica, Arial, sans-serif; // common font
|
||||||
$font-stack-headings : Helvetica, Arial, sans-serif; // headings font
|
$font-stack-headings : Helvetica, Arial, sans-serif; // headings font
|
||||||
$font-stack-monospace : Consolas, 'DejaVu Sans Mono', Courier, monospace; // monospace font
|
$font-stack-monospace : Consolas, DejaVu Sans Mono, Courier, monospace; // monospace font
|
||||||
$font-stack-universal : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack
|
$font-stack-universal : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack
|
||||||
|
|
||||||
// font colors
|
// font colors
|
||||||
$base-color : #000; // text color on body and content
|
$base-color : #000; // text color on body and content
|
||||||
$primary-color : #000; // text color on primary elements
|
$primary-color : #000; // text color on primary elements
|
||||||
$secondary-color : #000; // text color on secondary elements
|
$secondary-color : #000; // text color on secondary elements
|
||||||
$headings-color : #000; // text color on headings
|
$headings-color : #000; // text color on headings
|
||||||
$base-color-link : #333; // base links color
|
$base-color-link : #333; // base links color
|
||||||
$base-color-link-hover : #000; // base hovered/focused links color
|
$base-color-link-hover : #000; // base hovered/focused links color
|
||||||
|
|
||||||
// backgrounds
|
// backgrounds
|
||||||
$base-background : #fff; // body background color
|
$base-background : #fff; // body background color
|
||||||
$primary-background : #fff; // primary elements background color
|
$primary-background : #fff; // primary elements background color
|
||||||
$secondary-background : #fff; // secondary elements background color
|
$secondary-background : #fff; // secondary elements background color
|
||||||
|
|
||||||
// spacings (choose unit you prefer)
|
// spacings (choose unit you prefer)
|
||||||
$tiny-value : 5px; // tiny value for margins / paddings
|
$tiny-value : 5px; // tiny value for margins / paddings
|
||||||
$small-value : 10px; // small value for margins / paddings
|
$small-value : 10px; // small value for margins / paddings
|
||||||
$medium-value : 20px; // medium value for margins / paddings
|
$medium-value : 20px; // medium value for margins / paddings
|
||||||
$large-value : 40px; // large value for margins / paddings
|
$large-value : 40px; // large value for margins / paddings
|
||||||
$extra-large-value : 80px; // extra large value for margins / paddings
|
$extra-large-value : 80px; // extra large value for margins / paddings
|
||||||
$ultra-large-value : 160px; // ultra large value for margins / paddings
|
$ultra-large-value : 160px; // ultra large value for margins / paddings
|
||||||
|
|
||||||
// breakpoints (choose unit you prefer)
|
// breakpoints (choose unit you prefer)
|
||||||
$tiny-screen : 480px; // tiny screens media query (less than 480px)
|
$tiny-screen : 480px; // tiny screens media query (less than 480px)
|
||||||
$small-screen : 768px; // screens between 481px and 768px
|
$small-screen : 768px; // screens between 481px and 768px
|
||||||
$medium-screen : 1024px; // screens between 769px and 1024px
|
$medium-screen : 1024px; // screens between 769px and 1024px
|
||||||
$large-screen : 1280px; // screens between 1025px and 1280px
|
$large-screen : 1280px; // screens between 1025px and 1280px
|
||||||
$extra-large-screen : 1600px; // screens between 1281px and 1600px
|
$extra-large-screen : 1600px; // screens between 1281px and 1600px
|
||||||
$ultra-large-screen : 1920px; // ultra large screens
|
$ultra-large-screen : 1920px; // ultra large screens
|
||||||
|
|
||||||
// misc (choose unit you prefer)
|
// misc (choose unit you prefer)
|
||||||
$gutter : 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
$gutter : 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
||||||
|
|
||||||
// Sass mixins : don't touch or you'll be banned ;)
|
// Sass mixins : don't touch or you'll be banned ;)
|
||||||
// px to em/rem
|
// px to em/rem
|
||||||
|
|
||||||
@mixin rem($size) {
|
@mixin rem($size) {
|
||||||
@if unitless($size) {
|
@if unitless($size) {
|
||||||
font-size: ($size * 1rem) / 1rem * $base-font-size;
|
font-size: ($size * 1rem) / 1rem * $base-font-size;
|
||||||
font-size: $size * 1rem;
|
font-size: $size * 1rem;
|
||||||
|
|
@ -60,7 +60,7 @@ $gutter : 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
||||||
@warn "Please make sure `$size` is unitless."
|
@warn "Please make sure `$size` is unitless."
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@mixin em($size) {
|
@mixin em($size) {
|
||||||
@if unitless($size) {
|
@if unitless($size) {
|
||||||
$bf: $base-font-size / 1px;
|
$bf: $base-font-size / 1px;
|
||||||
font-size: $size / $bf * 1em;
|
font-size: $size / $bf * 1em;
|
||||||
|
|
@ -69,7 +69,7 @@ $gutter : 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
||||||
@warn "Please make sure `$size` is unitless."
|
@warn "Please make sure `$size` is unitless."
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@mixin px($size) {
|
@mixin px($size) {
|
||||||
@if unitless($size) {
|
@if unitless($size) {
|
||||||
$bf: $base-font-size / 1px;
|
$bf: $base-font-size / 1px;
|
||||||
font-size: $size * $bf * 1px;
|
font-size: $size * $bf * 1px;
|
||||||
|
|
|
||||||
|
|
@ -61,7 +61,7 @@ html {
|
||||||
|
|
||||||
/* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
|
/* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
|
||||||
/* thanks to @guardian, @victorbritopro and @eQRoeil */
|
/* thanks to @guardian, @victorbritopro and @eQRoeil */
|
||||||
font-size: calc(1em * 0.625);
|
font-size: calc(1em * 0.625);
|
||||||
|
|
||||||
/* disallow text zooming on orientation change (non standard property) */
|
/* disallow text zooming on orientation change (non standard property) */
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
|
|
@ -99,7 +99,7 @@ th,
|
||||||
label,
|
label,
|
||||||
textarea,
|
textarea,
|
||||||
caption,
|
caption,
|
||||||
details,
|
details,
|
||||||
figure {
|
figure {
|
||||||
margin-top: 0.75em;
|
margin-top: 0.75em;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
@ -153,7 +153,7 @@ h6, .h6-like {
|
||||||
@include em($base-font-size / 1px + 6);
|
@include em($base-font-size / 1px + 6);
|
||||||
}
|
}
|
||||||
|
|
||||||
code,
|
code,
|
||||||
pre,
|
pre,
|
||||||
samp,
|
samp,
|
||||||
kbd {
|
kbd {
|
||||||
|
|
@ -190,14 +190,14 @@ sup {
|
||||||
/* ----------------------------- */
|
/* ----------------------------- */
|
||||||
|
|
||||||
/* hidden but not for assistance tools, Yahoo! method */
|
/* hidden but not for assistance tools, Yahoo! method */
|
||||||
.visually-hidden {
|
.visually-hidden {
|
||||||
position: absolute !important;
|
position: absolute !important;
|
||||||
border: 0 !important;
|
border: 0 !important;
|
||||||
height: 1px !important;
|
height: 1px !important;
|
||||||
width: 1px !important;
|
width: 1px !important;
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
overflow: hidden !important;
|
overflow: hidden !important;
|
||||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
body > script {
|
body > script {
|
||||||
|
|
@ -221,18 +221,18 @@ body > script {
|
||||||
/* ----------------------------- */
|
/* ----------------------------- */
|
||||||
|
|
||||||
/* avoid top margins on first content element */
|
/* avoid top margins on first content element */
|
||||||
p,
|
p,
|
||||||
.p-like,
|
.p-like,
|
||||||
ul,
|
ul,
|
||||||
ol,
|
ol,
|
||||||
dl,
|
dl,
|
||||||
blockquote,
|
blockquote,
|
||||||
pre,
|
pre,
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6 {
|
h6 {
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
|
@ -249,14 +249,14 @@ li ol {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* max values */
|
/* max values */
|
||||||
img,
|
img,
|
||||||
table,
|
table,
|
||||||
td,
|
td,
|
||||||
blockquote,
|
blockquote,
|
||||||
code,
|
code,
|
||||||
pre,
|
pre,
|
||||||
textarea,
|
textarea,
|
||||||
input,
|
input,
|
||||||
video {
|
video {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
@ -273,7 +273,7 @@ table {
|
||||||
|
|
||||||
/* float layout */
|
/* float layout */
|
||||||
/* module, gains superpower "BFC" Block Formating Context */
|
/* module, gains superpower "BFC" Block Formating Context */
|
||||||
.mod {
|
.mod {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -314,7 +314,6 @@ table {
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* alignments (blocks and inline) */
|
/* alignments (blocks and inline) */
|
||||||
/* ------------------------------ */
|
/* ------------------------------ */
|
||||||
|
|
||||||
|
|
@ -340,26 +339,26 @@ img.end {
|
||||||
margin-left: $small-value;
|
margin-left: $small-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
img.left,
|
img.left,
|
||||||
img.right,
|
img.right,
|
||||||
img.start,
|
img.start,
|
||||||
img.end {
|
img.end {
|
||||||
margin-bottom: $tiny-value;
|
margin-bottom: $tiny-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.center {
|
.center {
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.txtleft {
|
.txtleft {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.txtright {
|
.txtright {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.txtcenter {
|
.txtcenter {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,120 +4,120 @@
|
||||||
/* ---------------------------------- */
|
/* ---------------------------------- */
|
||||||
|
|
||||||
/* blocks widths (percentage and pixels) */
|
/* blocks widths (percentage and pixels) */
|
||||||
.w10 {
|
.w10 {
|
||||||
width: 10%;
|
width: 10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w20 {
|
.w20 {
|
||||||
width: 20%;
|
width: 20%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w25 {
|
.w25 {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w30 {
|
.w30 {
|
||||||
width: 30%;
|
width: 30%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w33 {
|
.w33 {
|
||||||
width: 33.3333%;
|
width: 33.3333%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w40 {
|
.w40 {
|
||||||
width: 40%;
|
width: 40%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w50 {
|
.w50 {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w60 {
|
.w60 {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w66 {
|
.w66 {
|
||||||
width: 66.6666%;
|
width: 66.6666%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w70 {
|
.w70 {
|
||||||
width: 70%;
|
width: 70%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w75 {
|
.w75 {
|
||||||
width: 75%;
|
width: 75%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w80 {
|
.w80 {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w90 {
|
.w90 {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w100 {
|
.w100 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w50p {
|
.w50p {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w100p {
|
.w100p {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w150p {
|
.w150p {
|
||||||
width: 150px;
|
width: 150px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w200p {
|
.w200p {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w300p {
|
.w300p {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w400p {
|
.w400p {
|
||||||
width: 400px;
|
width: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w500p {
|
.w500p {
|
||||||
width: 500px;
|
width: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w600p {
|
.w600p {
|
||||||
width: 600px;
|
width: 600px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w700p {
|
.w700p {
|
||||||
width: 700px;
|
width: 700px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w800p {
|
.w800p {
|
||||||
width: 800px;
|
width: 800px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w960p {
|
.w960p {
|
||||||
width: 960px;
|
width: 960px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mw960p {
|
.mw960p {
|
||||||
max-width: 960px;
|
max-width: 960px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w1140p {
|
.w1140p {
|
||||||
width: 1140px;
|
width: 1140px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mw1140p {
|
.mw1140p {
|
||||||
max-width: 1140px;
|
max-width: 1140px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wauto {
|
.wauto {
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* spacing helpers
|
/* spacing helpers
|
||||||
|
|
@ -125,162 +125,172 @@ p,m = padding,margin
|
||||||
a,t,r,b,l = all,top,right,bottom,left
|
a,t,r,b,l = all,top,right,bottom,left
|
||||||
s,m,l,n = small, medium, large, none
|
s,m,l,n = small, medium, large, none
|
||||||
*/
|
*/
|
||||||
.man {
|
.man,
|
||||||
margin: 0;
|
.ma0 {
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan {
|
.pan,
|
||||||
padding: 0;
|
.pa0 {
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mas {
|
.mas {
|
||||||
margin: $small-value;
|
margin: $small-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mam {
|
.mam {
|
||||||
margin: $medium-value;
|
margin: $medium-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mal {
|
.mal {
|
||||||
margin: $large-value;
|
margin: $large-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pas {
|
.pas {
|
||||||
padding: $small-value;
|
padding: $small-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pam {
|
.pam {
|
||||||
padding: $medium-value;
|
padding: $medium-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pal {
|
.pal {
|
||||||
padding: $large-value;
|
padding: $large-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mtn {
|
.mtn,
|
||||||
margin-top: 0;
|
.mt0 {
|
||||||
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mts {
|
.mts {
|
||||||
margin-top: $small-value;
|
margin-top: $small-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mtm {
|
.mtm {
|
||||||
margin-top: $medium-value;
|
margin-top: $medium-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mtl {
|
.mtl {
|
||||||
margin-top: $large-value;
|
margin-top: $large-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mrn {
|
.mrn,
|
||||||
margin-right: 0;
|
.mr0 {
|
||||||
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mrs {
|
.mrs {
|
||||||
margin-right: $small-value;
|
margin-right: $small-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mrm {
|
.mrm {
|
||||||
margin-right: $medium-value;
|
margin-right: $medium-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mrl {
|
.mrl {
|
||||||
margin-right: $large-value;
|
margin-right: $large-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mbn {
|
.mbn,
|
||||||
margin-bottom: 0;
|
.mb0 {
|
||||||
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mbs {
|
.mbs {
|
||||||
margin-bottom: $small-value;
|
margin-bottom: $small-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mbm {
|
.mbm {
|
||||||
margin-bottom: $medium-value;
|
margin-bottom: $medium-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mbl {
|
.mbl {
|
||||||
margin-bottom: $large-value;
|
margin-bottom: $large-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mln {
|
.mln,
|
||||||
margin-left: 0;
|
.ml0 {
|
||||||
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mls {
|
.mls {
|
||||||
margin-left: $small-value;
|
margin-left: $small-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mlm {
|
.mlm {
|
||||||
margin-left: $medium-value;
|
margin-left: $medium-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mll {
|
.mll {
|
||||||
margin-left: $large-value;
|
margin-left: $large-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ptn {
|
.ptn,
|
||||||
padding-top: 0;
|
.pt0 {
|
||||||
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pts {
|
.pts {
|
||||||
padding-top: $small-value;
|
padding-top: $small-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ptm {
|
.ptm {
|
||||||
padding-top: $medium-value;
|
padding-top: $medium-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ptl {
|
.ptl {
|
||||||
padding-top: $large-value;
|
padding-top: $large-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prn {
|
.prn,
|
||||||
padding-right: 0;
|
.pr0 {
|
||||||
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prs {
|
.prs {
|
||||||
padding-right: $small-value;
|
padding-right: $small-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prm {
|
.prm {
|
||||||
padding-right: $medium-value;
|
padding-right: $medium-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prl {
|
.prl {
|
||||||
padding-right: $large-value;
|
padding-right: $large-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pbn {
|
.pbn,
|
||||||
padding-bottom: 0;
|
.pb0 {
|
||||||
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pbs {
|
.pbs {
|
||||||
padding-bottom: $small-value;
|
padding-bottom: $small-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pbm {
|
.pbm {
|
||||||
padding-bottom: $medium-value;
|
padding-bottom: $medium-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pbl {
|
.pbl {
|
||||||
padding-bottom: $large-value;
|
padding-bottom: $large-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pln {
|
.pln,
|
||||||
padding-left: 0;
|
.pl0 {
|
||||||
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pls {
|
.pls {
|
||||||
padding-left: $small-value;
|
padding-left: $small-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.plm {
|
.plm {
|
||||||
padding-left: $medium-value;
|
padding-left: $medium-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pll {
|
.pll {
|
||||||
padding-left: $large-value;
|
padding-left: $large-value;
|
||||||
}
|
}
|
||||||
|
|
@ -6,12 +6,12 @@
|
||||||
/* grids inspired from SUIT https://github.com/suitcss/suit */
|
/* grids inspired from SUIT https://github.com/suitcss/suit */
|
||||||
|
|
||||||
/* overall container of grids */
|
/* overall container of grids */
|
||||||
.grid {
|
.grid {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* global styles for direct child ex. .grid3 */
|
/* global styles for direct child ex. .grid3 */
|
||||||
.grid > * {
|
.grid > * {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
/* gutter value */
|
/* gutter value */
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* global styles for each "cell" */
|
/* global styles for each "cell" */
|
||||||
.grid > * > * {
|
.grid > * > * {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
/* gutter value */
|
/* gutter value */
|
||||||
padding-left: $gutter;
|
padding-left: $gutter;
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@ table.table-auto {
|
||||||
caption {
|
caption {
|
||||||
padding: $small-value;
|
padding: $small-value;
|
||||||
color: #555;
|
color: #555;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
td,
|
td,
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,7 @@ label,
|
||||||
font-size: inherit;
|
font-size: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
||||||
|
|
@ -69,10 +69,10 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-arrow1:before,
|
.icon-arrow1:before,
|
||||||
.icon-arrow1.after:after {
|
.icon-arrow1.after:after {
|
||||||
content: "\2192";
|
content: "\2192";
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -0.15em;
|
top: -0.15em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -91,7 +91,7 @@
|
||||||
content: "\2039";
|
content: "\2039";
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 1.6em;
|
font-size: 1.6em;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -0.15em;
|
top: -0.15em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -100,7 +100,7 @@
|
||||||
content: "\203A";
|
content: "\203A";
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 1.6em;
|
font-size: 1.6em;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -0.15em;
|
top: -0.15em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -17,16 +17,16 @@
|
||||||
@media (min-width: ($medium-screen + 1)) {
|
@media (min-width: ($medium-screen + 1)) {
|
||||||
|
|
||||||
/* layouts for large screens */
|
/* layouts for large screens */
|
||||||
.large-hidden {
|
.large-hidden {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.large-visible {
|
.large-visible {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.large-no-float {
|
.large-no-float {
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.large-inbl {
|
.large-inbl {
|
||||||
|
|
@ -45,24 +45,24 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* widths for large screens */
|
/* widths for large screens */
|
||||||
.large-w25 {
|
.large-w25 {
|
||||||
width: 25% !important;
|
width: 25% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.large-w33 {
|
.large-w33 {
|
||||||
width: 33.3333% !important;
|
width: 33.3333% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.large-w50 {
|
.large-w50 {
|
||||||
width: 50% !important;
|
width: 50% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.large-w66 {
|
.large-w66 {
|
||||||
width: 66.6666% !important;
|
width: 66.6666% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.large-w75 {
|
.large-w75 {
|
||||||
width: 75% !important;
|
width: 75% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.large-w100,
|
.large-w100,
|
||||||
|
|
@ -73,30 +73,13 @@
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
margin-left: 0 !important;
|
margin-left: 0 !important;
|
||||||
margin-right: 0 !important;
|
margin-right: 0 !important;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* margins for large screens */
|
/* margins for large screens */
|
||||||
.large-man {
|
.large-man,
|
||||||
margin: 0 !important;
|
.large-ma0 {
|
||||||
}
|
margin: 0 !important;
|
||||||
|
|
||||||
/* grid rwd for large screens */
|
|
||||||
.grid5 > *,
|
|
||||||
.grid6 > *,
|
|
||||||
.grid8 > *,
|
|
||||||
.grid10 > *,
|
|
||||||
.grid12 > * {
|
|
||||||
width: 33.333%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* autogrid rwd for large screens */
|
|
||||||
.autogrid5 > *,
|
|
||||||
.autogrid6 > *,
|
|
||||||
.autogrid8 > *,
|
|
||||||
.autogrid10 > *,
|
|
||||||
.autogrid12 > * {
|
|
||||||
width: 32%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -107,16 +90,16 @@
|
||||||
@media (min-width: ($small-screen + 1)) and (max-width: $medium-screen) {
|
@media (min-width: ($small-screen + 1)) and (max-width: $medium-screen) {
|
||||||
|
|
||||||
/* layouts for medium screens */
|
/* layouts for medium screens */
|
||||||
.medium-hidden {
|
.medium-hidden {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.medium-visible {
|
.medium-visible {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.medium-no-float {
|
.medium-no-float {
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.medium-inbl {
|
.medium-inbl {
|
||||||
|
|
@ -124,35 +107,37 @@
|
||||||
float: none;
|
float: none;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
.medium-row {
|
.medium-row {
|
||||||
display: table;
|
display: table;
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.medium-col {
|
.medium-col {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* widths for medium screens */
|
/* widths for medium screens */
|
||||||
.medium-w25 {
|
.medium-w25 {
|
||||||
width: 25% !important;
|
width: 25% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.medium-w33 {
|
.medium-w33 {
|
||||||
width: 33.3333% !important;
|
width: 33.3333% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.medium-w50 {
|
.medium-w50 {
|
||||||
width: 50% !important;
|
width: 50% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.medium-w66 {
|
.medium-w66 {
|
||||||
width: 66.6666% !important;
|
width: 66.6666% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.medium-w75 {
|
.medium-w75 {
|
||||||
width: 75% !important;
|
width: 75% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.medium-w100,
|
.medium-w100,
|
||||||
|
|
@ -163,12 +148,13 @@
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
margin-left: 0 !important;
|
margin-left: 0 !important;
|
||||||
margin-right: 0 !important;
|
margin-right: 0 !important;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* margins for medium screens */
|
/* margins for medium screens */
|
||||||
.medium-man {
|
.medium-man,
|
||||||
margin: 0 !important;
|
.medium-ma0 {
|
||||||
|
margin: 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -199,19 +185,19 @@
|
||||||
.mw960p {
|
.mw960p {
|
||||||
width: auto;
|
width: auto;
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* layouts for small screens */
|
/* layouts for small screens */
|
||||||
.small-hidden {
|
.small-hidden {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-visible {
|
.small-visible {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-no-float {
|
.small-no-float {
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-inbl {
|
.small-inbl {
|
||||||
|
|
@ -219,55 +205,59 @@
|
||||||
float: none;
|
float: none;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-row {
|
.small-row {
|
||||||
display: table !important;
|
display: table !important;
|
||||||
table-layout: fixed !important;
|
table-layout: fixed !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-col {
|
.small-col {
|
||||||
display: table-cell !important;
|
display: table-cell !important;
|
||||||
vertical-align: top !important;
|
vertical-align: top !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* widths for small screens */
|
/* widths for small screens */
|
||||||
.small-w25 {
|
.small-w25 {
|
||||||
width: 25% !important;
|
width: 25% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-w33 {
|
.small-w33 {
|
||||||
width: 33.3333% !important;
|
width: 33.3333% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-w50 {
|
.small-w50 {
|
||||||
width: 50% !important;
|
width: 50% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-w66 {
|
.small-w66 {
|
||||||
width: 66.6666% !important;
|
width: 66.6666% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-w75 {
|
.small-w75 {
|
||||||
width: 75% !important;
|
width: 75% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-w100,
|
.small-w100,
|
||||||
.small-wauto {
|
.small-wauto {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
float: none !important;
|
float: none !important;
|
||||||
clear: none !important;
|
clear: none !important;
|
||||||
width: auto !important;
|
width: auto !important;
|
||||||
margin-left: 0 !important;
|
margin-left: 0 !important;
|
||||||
margin-right: 0 !important;
|
margin-right: 0 !important;
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* margins for small screens */
|
/* margins for small screens */
|
||||||
.small-man {
|
.small-man,
|
||||||
margin: 0 !important;
|
.small-ma0 {
|
||||||
|
margin: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small-pan {
|
.small-pan,
|
||||||
padding: 0 !important;
|
.small-pa0 {
|
||||||
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* grid rwd for small screens */
|
/* grid rwd for small screens */
|
||||||
|
|
@ -304,18 +294,18 @@
|
||||||
float: none;
|
float: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* layouts for tiny screens */
|
/* layouts for tiny screens */
|
||||||
.tiny-hidden {
|
.tiny-hidden {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tiny-visible {
|
.tiny-visible {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tiny-no-float {
|
.tiny-no-float {
|
||||||
|
|
@ -346,31 +336,33 @@
|
||||||
text-align: left !important;
|
text-align: left !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
thead { display: none; }
|
thead {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* widths for tiny screens */
|
/* widths for tiny screens */
|
||||||
.tiny-w25 {
|
.tiny-w25 {
|
||||||
width: 25% !important;
|
width: 25% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tiny-w33 {
|
.tiny-w33 {
|
||||||
width: 33.3333% !important;
|
width: 33.3333% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tiny-w50 {
|
.tiny-w50 {
|
||||||
width: 50% !important;
|
width: 50% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tiny-w66 {
|
.tiny-w66 {
|
||||||
width: 66.6666% !important;
|
width: 66.6666% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tiny-w75 {
|
.tiny-w75 {
|
||||||
width: 75% !important;
|
width: 75% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tiny-w100,
|
.tiny-w100,
|
||||||
.tiny-wauto {
|
.tiny-wauto {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
float: none !important;
|
float: none !important;
|
||||||
clear: none !important;
|
clear: none !important;
|
||||||
|
|
@ -381,12 +373,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* margins for tiny screens */
|
/* margins for tiny screens */
|
||||||
.tiny-man {
|
.tiny-man,
|
||||||
margin: 0 !important;
|
.tiny-ma0 {
|
||||||
|
margin: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tiny-pan {
|
.tiny-pan,
|
||||||
padding: 0 !important;
|
.tiny-pa0 {
|
||||||
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* grid rwd for tiny screens */
|
/* grid rwd for tiny screens */
|
||||||
|
|
|
||||||
|
|
@ -37,14 +37,14 @@
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
filter: grayscale(100%);
|
filter: grayscale(100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* no orphans, no widows */
|
/* no orphans, no widows */
|
||||||
p,
|
p,
|
||||||
blockquote {
|
blockquote {
|
||||||
orphans: 3;
|
orphans: 3;
|
||||||
widows: 3;
|
widows: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -52,12 +52,12 @@
|
||||||
blockquote,
|
blockquote,
|
||||||
ul,
|
ul,
|
||||||
ol {
|
ol {
|
||||||
page-break-inside: avoid;
|
page-break-inside: avoid;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* page break before main headers */
|
/* page break before main headers */
|
||||||
h1 {
|
h1 {
|
||||||
page-break-before: always;
|
page-break-before: always;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* no breaks after these elements */
|
/* no breaks after these elements */
|
||||||
|
|
@ -75,7 +75,7 @@
|
||||||
|
|
||||||
/* displaying URLs */
|
/* displaying URLs */
|
||||||
a[href]:after {
|
a[href]:after {
|
||||||
content: " (" attr(href) ")";
|
content: " (" attr(href) ")";
|
||||||
}
|
}
|
||||||
|
|
||||||
a[href^="javascript:"]:after,
|
a[href^="javascript:"]:after,
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
// Sass files : chose the ones you need
|
// Sass files : chose the ones you need
|
||||||
@import "_02-helpers"; // width and spacers visually classes
|
@import "_02-helpers"; // width and spacers visually classes
|
||||||
@import "_03-grids"; // grids and autogrids
|
@import "_03-grids"; // grids and autogrids
|
||||||
@import "_04-tables";
|
@import "_04-tables";
|
||||||
@import "_05-forms";
|
@import "_05-forms";
|
||||||
@import "_06-icons"; // UTF-8 icons
|
@import "_06-icons"; // UTF-8 icons
|
||||||
@import "_07-flexbox";
|
@import "_07-flexbox";
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user