adjusted version for box-sizing
This commit is contained in:
yoann delpierre
parent
1b9e0bf9f5
commit
b7105ba960
|
|
@ -6,11 +6,14 @@
|
|||
/* == soft reset */
|
||||
/* ----------------------------- */
|
||||
/* switching box model for all elements */
|
||||
* {
|
||||
html {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
/* soft reset */
|
||||
html,
|
||||
body {
|
||||
|
|
@ -909,7 +912,7 @@ input[type='submit']::-moz-focus-inner {
|
|||
font-size: 1.6em;
|
||||
top: -0.05em;
|
||||
}
|
||||
/* flexbox layout
|
||||
/* flexbox layout
|
||||
Tutorial: http://knacss.com/demos/tutoriel.html#flex */
|
||||
.flex {
|
||||
display: -webkit-box;
|
||||
|
|
|
|||
|
|
@ -8,9 +8,12 @@
|
|||
/* ----------------------------- */
|
||||
|
||||
/* switching box model for all elements */
|
||||
* {
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
/* soft reset */
|
||||
html,
|
||||
|
|
@ -56,27 +59,27 @@ svg:not(:root) {
|
|||
|
||||
|
||||
html {
|
||||
|
||||
|
||||
/* set base font-size to equiv "10px", which is adapted to rem unit */
|
||||
font-size: 62.5%;
|
||||
|
||||
|
||||
/* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
|
||||
/* thanks to @guardian, @victorbritopro and @eQRoeil */
|
||||
font-size: calc(1em * 0.625);
|
||||
|
||||
|
||||
/* disallow text zooming on orientation change (non standard property) */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
|
||||
/* set body font-size in em (1.4em equiv "14px") */
|
||||
font-size: unit((@base-font-size / 10), em);
|
||||
|
||||
|
||||
background-color: @base-background;
|
||||
color: @base-color;
|
||||
font-family: @font-stack-common;
|
||||
font-family: @font-stack-common;
|
||||
line-height: @line-height;
|
||||
}
|
||||
|
||||
|
|
@ -100,7 +103,7 @@ th,
|
|||
label,
|
||||
textarea,
|
||||
caption,
|
||||
details,
|
||||
details,
|
||||
figure {
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 0;
|
||||
|
|
@ -160,12 +163,12 @@ h6,
|
|||
.em(@base-font-size + 6);
|
||||
}
|
||||
|
||||
code,
|
||||
code,
|
||||
pre,
|
||||
samp,
|
||||
kbd {
|
||||
/* IE fix */
|
||||
white-space: pre-line;
|
||||
white-space: pre-line;
|
||||
white-space: pre-wrap;
|
||||
font-family: @font-stack-monospace;
|
||||
line-height: normal;
|
||||
|
|
@ -197,10 +200,10 @@ sup {
|
|||
/* ----------------------------- */
|
||||
|
||||
/* hidden but not for an assistive technology like a screen reader, Yahoo! method */
|
||||
.visually-hidden {
|
||||
.visually-hidden {
|
||||
position: absolute !important;
|
||||
border: 0 !important;
|
||||
height: 1px !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden !important;
|
||||
|
|
@ -229,17 +232,17 @@ body > script {
|
|||
|
||||
/* avoid top margins on first content element */
|
||||
p,
|
||||
.p-like,
|
||||
ul,
|
||||
ol,
|
||||
.p-like,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
blockquote,
|
||||
blockquote,
|
||||
pre,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
|
|
@ -256,14 +259,14 @@ li ol {
|
|||
}
|
||||
|
||||
/* max values */
|
||||
img,
|
||||
table,
|
||||
td,
|
||||
blockquote,
|
||||
code,
|
||||
pre,
|
||||
textarea,
|
||||
input,
|
||||
img,
|
||||
table,
|
||||
td,
|
||||
blockquote,
|
||||
code,
|
||||
pre,
|
||||
textarea,
|
||||
input,
|
||||
video {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
@ -279,7 +282,7 @@ table {
|
|||
|
||||
/* float layout */
|
||||
/* module, gains superpower "BFC" Block Formating Context */
|
||||
.mod {
|
||||
.mod {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -345,15 +348,15 @@ img.end {
|
|||
margin-left: @small-value;
|
||||
}
|
||||
|
||||
img.left,
|
||||
img.left,
|
||||
img.right,
|
||||
img.start,
|
||||
img.start,
|
||||
img.end {
|
||||
margin-bottom: @tiny-value;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,9 +8,12 @@
|
|||
/* ----------------------------- */
|
||||
|
||||
/* switching box model for all elements */
|
||||
* {
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
/* soft reset */
|
||||
html,
|
||||
|
|
@ -55,24 +58,24 @@ svg:not(:root) {
|
|||
/* ----------------------------- */
|
||||
|
||||
html {
|
||||
|
||||
|
||||
/* set base font-size to equiv "10px", which is adapted to rem unit */
|
||||
font-size: 62.5%;
|
||||
|
||||
|
||||
/* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
|
||||
/* thanks to @guardian, @victorbritopro and @eQRoeil */
|
||||
font-size: calc(1em * 0.625);
|
||||
|
||||
|
||||
/* disallow text zooming on orientation change (non standard property) */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
|
||||
/* set body font-size in em (1.4em equiv "14px") */
|
||||
font-size: ($base-font-size / 10px) + em;
|
||||
|
||||
|
||||
background-color: $base-background;
|
||||
color: $base-color;
|
||||
font-family: $font-stack-common;
|
||||
|
|
@ -99,7 +102,7 @@ th,
|
|||
label,
|
||||
textarea,
|
||||
caption,
|
||||
details,
|
||||
details,
|
||||
figure {
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 0;
|
||||
|
|
@ -153,7 +156,7 @@ h6, .h6-like {
|
|||
@include em($base-font-size / 1px + 6);
|
||||
}
|
||||
|
||||
code,
|
||||
code,
|
||||
pre,
|
||||
samp,
|
||||
kbd {
|
||||
|
|
@ -190,10 +193,10 @@ sup {
|
|||
/* ----------------------------- */
|
||||
|
||||
/* hidden but not for assistance tools, Yahoo! method */
|
||||
.visually-hidden {
|
||||
.visually-hidden {
|
||||
position: absolute !important;
|
||||
border: 0 !important;
|
||||
height: 1px !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden !important;
|
||||
|
|
@ -221,18 +224,18 @@ body > script {
|
|||
/* ----------------------------- */
|
||||
|
||||
/* avoid top margins on first content element */
|
||||
p,
|
||||
.p-like,
|
||||
ul,
|
||||
ol,
|
||||
p,
|
||||
.p-like,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
blockquote,
|
||||
blockquote,
|
||||
pre,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
|
|
@ -249,21 +252,21 @@ li ol {
|
|||
}
|
||||
|
||||
/* max values */
|
||||
img,
|
||||
table,
|
||||
td,
|
||||
blockquote,
|
||||
code,
|
||||
pre,
|
||||
textarea,
|
||||
input,
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -273,7 +276,7 @@ table {
|
|||
|
||||
/* float layout */
|
||||
/* module, gains superpower "BFC" Block Formating Context */
|
||||
.mod {
|
||||
.mod {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -340,26 +343,26 @@ img.end {
|
|||
margin-left: $small-value;
|
||||
}
|
||||
|
||||
img.left,
|
||||
img.left,
|
||||
img.right,
|
||||
img.start,
|
||||
img.start,
|
||||
img.end {
|
||||
margin-bottom: $tiny-value;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
.center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.txtleft {
|
||||
text-align: left;
|
||||
.txtleft {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.txtright {
|
||||
text-align: right;
|
||||
.txtright {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.txtcenter {
|
||||
text-align: center;
|
||||
.txtcenter {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user