Merge branch 'v8'
# Conflicts: # README.md # changelog.md # css/knacss-unminified.css # css/knacss.css # package-lock.json # package.json
This commit is contained in:
Raphaël Goetter
commit
f5b8183ee3
19 changed files with 665 additions and 751 deletions
2
.browserslistrc
Normal file
2
.browserslistrc
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
>0.25%
|
||||
not op_mini all
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
@media (min-width:480px){[class*=" grid-"],[class^=grid-]{display:-ms-grid;display:grid;grid-auto-flow:dense}[class*=" grid-"].has-gutter,[class^=grid-].has-gutter{grid-gap:1rem}[class*=" grid-"].has-gutter-l,[class^=grid-].has-gutter-l{grid-gap:2rem}[class*=" grid-"].has-gutter-xl,[class^=grid-].has-gutter-xl{grid-gap:4rem}}@media (min-width:480px){.autogrid,.grid{display:-ms-grid;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.autogrid.has-gutter,.grid.has-gutter{grid-column-gap:1rem}.autogrid.has-gutter-l,.grid.has-gutter-l{grid-column-gap:2rem}.autogrid.has-gutter-xl,.grid.has-gutter-xl{grid-column-gap:4rem}}[class*=grid-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=grid-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=grid-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=grid-5]{-ms-grid-columns:(1fr)[5];grid-template-columns:repeat(5,1fr)}[class*=grid-6]{-ms-grid-columns:(1fr)[6];grid-template-columns:repeat(6,1fr)}[class*=grid-7]{-ms-grid-columns:(1fr)[7];grid-template-columns:repeat(7,1fr)}[class*=grid-8]{-ms-grid-columns:(1fr)[8];grid-template-columns:repeat(8,1fr)}[class*=grid-9]{-ms-grid-columns:(1fr)[9];grid-template-columns:repeat(9,1fr)}[class*=grid-10]{-ms-grid-columns:(1fr)[10];grid-template-columns:repeat(10,1fr)}[class*=grid-11]{-ms-grid-columns:(1fr)[11];grid-template-columns:repeat(11,1fr)}[class*=grid-12]{-ms-grid-columns:(1fr)[12];grid-template-columns:repeat(12,1fr)}[class*=col-1]{grid-column:auto/span 1}[class*=row-1]{grid-row:auto/span 1}[class*=col-2]{grid-column:auto/span 2}[class*=row-2]{grid-row:auto/span 2}[class*=col-3]{grid-column:auto/span 3}[class*=row-3]{grid-row:auto/span 3}[class*=col-4]{grid-column:auto/span 4}[class*=row-4]{grid-row:auto/span 4}[class*=col-5]{grid-column:auto/span 5}[class*=row-5]{grid-row:auto/span 5}[class*=col-6]{grid-column:auto/span 6}[class*=row-6]{grid-row:auto/span 6}[class*=col-7]{grid-column:auto/span 7}[class*=row-7]{grid-row:auto/span 7}[class*=col-8]{grid-column:auto/span 8}[class*=row-8]{grid-row:auto/span 8}[class*=col-9]{grid-column:auto/span 9}[class*=row-9]{grid-row:auto/span 9}[class*=col-10]{grid-column:auto/span 10}[class*=row-10]{grid-row:auto/span 10}[class*=col-11]{grid-column:auto/span 11}[class*=row-11]{grid-row:auto/span 11}[class*=col-12]{grid-column:auto/span 12}[class*=row-12]{grid-row:auto/span 12}@media (min-width:480px) and (max-width:767px){[class*=grid-][class*=-small-1]{-ms-grid-columns:(1fr)[1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*=-small-1]{grid-column:auto/span 1}[class*=grid-][class*=-small-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=col-][class*=-small-2]{grid-column:auto/span 2}[class*=grid-][class*=-small-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=col-][class*=-small-3]{grid-column:auto/span 3}[class*=grid-][class*=-small-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=col-][class*=-small-4]{grid-column:auto/span 4}[class*=-small-all]{grid-column:1/-1}}.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1}
|
||||
@media (min-width:480px){[class*=" grillade-"],[class^=grillade-]{display:-ms-grid;display:grid}[class*=" grillade-"].has-gutter,[class^=grillade-].has-gutter{grid-gap:1rem}[class*=" grillade-"].has-gutter-l,[class^=grillade-].has-gutter-l{grid-gap:2rem}[class*=" grillade-"].has-gutter-xl,[class^=grillade-].has-gutter-xl{grid-gap:4rem}}@media (min-width:480px){.autogrillade,.grillade{display:-ms-grid;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.autogrillade.has-gutter,.grillade.has-gutter{grid-column-gap:1rem}.autogrillade.has-gutter-l,.grillade.has-gutter-l{grid-column-gap:2rem}.autogrillade.has-gutter-xl,.grillade.has-gutter-xl{grid-column-gap:4rem}}[class*=grillade-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=grillade-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=grillade-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=grillade-5]{-ms-grid-columns:(1fr)[5];grid-template-columns:repeat(5,1fr)}[class*=grillade-6]{-ms-grid-columns:(1fr)[6];grid-template-columns:repeat(6,1fr)}[class*=grillade-7]{-ms-grid-columns:(1fr)[7];grid-template-columns:repeat(7,1fr)}[class*=grillade-8]{-ms-grid-columns:(1fr)[8];grid-template-columns:repeat(8,1fr)}[class*=grillade-9]{-ms-grid-columns:(1fr)[9];grid-template-columns:repeat(9,1fr)}[class*=grillade-10]{-ms-grid-columns:(1fr)[10];grid-template-columns:repeat(10,1fr)}[class*=grillade-11]{-ms-grid-columns:(1fr)[11];grid-template-columns:repeat(11,1fr)}[class*=grillade-12]{-ms-grid-columns:(1fr)[12];grid-template-columns:repeat(12,1fr)}[class*=col-1]{grid-column:auto/span 1}[class*=row-1]{grid-row:auto/span 1}[class*=col-2]{grid-column:auto/span 2}[class*=row-2]{grid-row:auto/span 2}[class*=col-3]{grid-column:auto/span 3}[class*=row-3]{grid-row:auto/span 3}[class*=col-4]{grid-column:auto/span 4}[class*=row-4]{grid-row:auto/span 4}[class*=col-5]{grid-column:auto/span 5}[class*=row-5]{grid-row:auto/span 5}[class*=col-6]{grid-column:auto/span 6}[class*=row-6]{grid-row:auto/span 6}[class*=col-7]{grid-column:auto/span 7}[class*=row-7]{grid-row:auto/span 7}[class*=col-8]{grid-column:auto/span 8}[class*=row-8]{grid-row:auto/span 8}[class*=col-9]{grid-column:auto/span 9}[class*=row-9]{grid-row:auto/span 9}[class*=col-10]{grid-column:auto/span 10}[class*=row-10]{grid-row:auto/span 10}[class*=col-11]{grid-column:auto/span 11}[class*=row-11]{grid-row:auto/span 11}[class*=col-12]{grid-column:auto/span 12}[class*=row-12]{grid-row:auto/span 12}@media (min-width:480px) and (max-width:991px){[class*=grillade-][class*=-medium-1]{-ms-grid-columns:(1fr)[1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*=-medium-1]{grid-column:auto/span 1}[class*=grillade-][class*=-medium-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=col-][class*=-medium-2]{grid-column:auto/span 2}[class*=grillade-][class*=-medium-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=col-][class*=-medium-3]{grid-column:auto/span 3}[class*=grillade-][class*=-medium-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=col-][class*=-medium-4]{grid-column:auto/span 4}[class*=-medium-all]{grid-column:1/-1}}@media (min-width:480px) and (max-width:767px){[class*=grillade-][class*=-small-1]{-ms-grid-columns:(1fr)[1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*=-small-1]{grid-column:auto/span 1}[class*=grillade-][class*=-small-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=col-][class*=-small-2]{grid-column:auto/span 2}[class*=grillade-][class*=-small-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=col-][class*=-small-3]{grid-column:auto/span 3}[class*=grillade-][class*=-small-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=col-][class*=-small-4]{grid-column:auto/span 4}[class*=-small-all]{grid-column:1/-1}}[class*=-start]{-webkit-box-pack:start;justify-content:start}[class*=-end]{-webkit-box-pack:end;justify-content:end}[class*=-center]{-webkit-box-pack:center;justify-content:center}[class*=-space-between]{-webkit-box-pack:justify;justify-content:space-between}[class*=-space-around]{justify-content:space-around}[class*=-space-evenly]{-webkit-box-pack:space-evenly;justify-content:space-evenly}.item-first{-webkit-box-ordinal-group:0;order:-1}.item-last{-webkit-box-ordinal-group:2;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1}
|
||||
57
gulpfile.js
57
gulpfile.js
|
|
@ -9,44 +9,31 @@ var rename = require('gulp-rename');
|
|||
var cssnano = require('cssnano'); // minifies CSS
|
||||
var autoprefixer = require('autoprefixer');
|
||||
|
||||
var unprefix = require("postcss-unprefix"); // deletes old prefixes
|
||||
var unprefix = require('postcss-unprefix'); // deletes old prefixes
|
||||
var flexbugs = require('postcss-flexbugs-fixes'); // flexbox fixes for IE
|
||||
var gaps = require('postcss-gap-properties'); // gaps polyfill
|
||||
|
||||
var browsersList = [
|
||||
'> 1%',
|
||||
'last 2 versions',
|
||||
'IE >= 10', 'Edge >= 16',
|
||||
'Chrome >= 60',
|
||||
'Firefox >= 50', 'Firefox ESR',
|
||||
'Safari >= 10',
|
||||
'ios_saf >= 10',
|
||||
'Android >= 5'
|
||||
];
|
||||
|
||||
var plugins = [
|
||||
unprefix(),
|
||||
autoprefixer({
|
||||
grid: true,
|
||||
browsers: browsersList
|
||||
}),
|
||||
flexbugs(),
|
||||
gaps()
|
||||
autoprefixer({
|
||||
grid: true
|
||||
}),
|
||||
flexbugs(),
|
||||
gaps()
|
||||
];
|
||||
|
||||
var pluginsProd = [
|
||||
unprefix(),
|
||||
autoprefixer({
|
||||
grid: true,
|
||||
browsers: browsersList
|
||||
}),
|
||||
flexbugs(),
|
||||
gaps(),
|
||||
cssnano()
|
||||
autoprefixer({
|
||||
grid: true
|
||||
}),
|
||||
flexbugs(),
|
||||
gaps(),
|
||||
cssnano()
|
||||
];
|
||||
|
||||
// tâche cssDev = compile vers knacss-unminified.css
|
||||
gulp.task('cssDev', function () {
|
||||
gulp.task('cssDev', () => {
|
||||
return gulp.src('./sass/knacss.scss')
|
||||
.pipe(sass({
|
||||
outputStyle: 'expanded' // CSS non minifiée plus lisible ('}' à la ligne)
|
||||
|
|
@ -57,31 +44,31 @@ gulp.task('cssDev', function () {
|
|||
});
|
||||
|
||||
// tâche cssProd = compile vers knacss.css minifié
|
||||
gulp.task('cssProd', function () {
|
||||
gulp.task('cssProd', () => {
|
||||
return gulp.src('./sass/knacss.scss')
|
||||
.pipe(sass())
|
||||
.pipe(postcss(pluginsProd))
|
||||
.pipe(gulp.dest('./css/'));
|
||||
});
|
||||
|
||||
gulp.task('grillade', function() {
|
||||
return gulp.src('./sass/_library/grillade-grid.scss')
|
||||
gulp.task('grillade', () => {
|
||||
return gulp.src('./sass/base/grillade-grid.scss')
|
||||
.pipe(sass())
|
||||
.pipe(postcss(pluginsProd))
|
||||
.pipe(gulp.dest('./css/'));
|
||||
});
|
||||
|
||||
gulp.task('grillade-flex', function() {
|
||||
return gulp.src('./sass/_library/grillade-flex.scss')
|
||||
gulp.task('grillade-flex', () => {
|
||||
return gulp.src('./sass/base/grillade-flex.scss')
|
||||
.pipe(sass())
|
||||
.pipe(postcss(pluginsProd))
|
||||
.pipe(gulp.dest('./css/'));
|
||||
});
|
||||
|
||||
// Watcher
|
||||
gulp.task('watch', function() {
|
||||
gulp.watch(['./sass/*.scss'], ['cssDev']);
|
||||
gulp.task('watch', () => {
|
||||
gulp.watch(['./sass/*.scss'], gulp.series('cssDev'));
|
||||
});
|
||||
|
||||
|
||||
gulp.task('default', ['cssDev', 'cssProd', 'grillade', 'grillade-flex']);
|
||||
// Tâche par défaut
|
||||
gulp.task('default', gulp.series('cssDev', 'cssProd', 'grillade', 'grillade-flex'));
|
||||
|
|
|
|||
|
|
@ -1,274 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Base (basic styles) */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* disable animations styles when reduced rotion is enabled */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* switching to border-box model for all elements */
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
/* avoid min-width: auto on flex and grid children */
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
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 */
|
||||
font-size: calc(1em * 0.625);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
@include font-size(base);
|
||||
background-color: $background-base;
|
||||
color: $color-base;
|
||||
font-family: $font-family-base;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: $link-color;
|
||||
text-decoration: $link-decoration;
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $link-color-hover;
|
||||
text-decoration: $link-decoration-hover;
|
||||
}
|
||||
}
|
||||
|
||||
/* Headings */
|
||||
h1, .h1-like {
|
||||
@include font-size(h1);
|
||||
@if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
|
||||
font-family: $font-family-headings;
|
||||
}
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
h2, .h2-like {
|
||||
@include font-size(h2);
|
||||
@if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
|
||||
font-family: $font-family-headings;
|
||||
}
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
h3, .h3-like {
|
||||
@include font-size(h3);
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
h4, .h4-like {
|
||||
@include font-size(h4);
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
h5, .h5-like {
|
||||
@include font-size(h5);
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
h6, .h6-like {
|
||||
@include font-size(h6);
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
/* Vertical rythm */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
dd {
|
||||
margin-top: 0;
|
||||
margin-bottom: $headings-margin-bottom;
|
||||
}
|
||||
|
||||
p,
|
||||
address,
|
||||
ol,
|
||||
ul,
|
||||
dl,
|
||||
blockquote,
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: $paragraph-margin-bottom;
|
||||
}
|
||||
|
||||
/* Avoid margins on nested elements */
|
||||
li p,
|
||||
li .p-like,
|
||||
li ul,
|
||||
li ol,
|
||||
ol ol,
|
||||
ul ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Max values */
|
||||
img,
|
||||
table,
|
||||
td,
|
||||
blockquote,
|
||||
code,
|
||||
pre,
|
||||
textarea,
|
||||
input,
|
||||
video,
|
||||
svg {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Styling elements */
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
em,
|
||||
.italic,
|
||||
address,
|
||||
cite,
|
||||
i,
|
||||
var {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
mark {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding: 0 2px;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
pre {
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 2px 4px;
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
color: #b11;
|
||||
}
|
||||
|
||||
pre code {
|
||||
padding: 0;
|
||||
background: none;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
sup,
|
||||
sub {
|
||||
vertical-align: 0;
|
||||
}
|
||||
|
||||
sup {
|
||||
bottom: 1ex;
|
||||
}
|
||||
|
||||
sub {
|
||||
top: 0.5ex;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
position: relative;
|
||||
padding-left: 3em;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
blockquote::before {
|
||||
content: "\201C";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
font-family: georgia, serif;
|
||||
font-size: 5em;
|
||||
height: .4em;
|
||||
line-height: .9;
|
||||
color: $quote-color;
|
||||
}
|
||||
|
||||
blockquote > footer {
|
||||
margin-top: .75em;
|
||||
font-size: 0.9em;
|
||||
color: rgba(0, 0, 0, .7);
|
||||
|
||||
&::before {
|
||||
content: "\2014 \0020";
|
||||
}
|
||||
}
|
||||
|
||||
q {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
q,
|
||||
.q {
|
||||
quotes: "“" "”" "‘" "’";
|
||||
|
||||
&:lang(fr) {
|
||||
quotes: "«\00a0" "\00a0»" "“" "”";
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
clear: both;
|
||||
height: 1px;
|
||||
margin: 1em 0 2em;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: #ccc;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
figure {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
code,
|
||||
pre,
|
||||
samp,
|
||||
kbd {
|
||||
white-space: pre-wrap;
|
||||
font-family: $font-family-monospace;
|
||||
line-height: normal;
|
||||
}
|
||||
|
|
@ -1,334 +0,0 @@
|
|||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.15;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-ms-overflow-style: scrollbar;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
@-ms-viewport {
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #212529;
|
||||
text-align: left;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
[tabindex="-1"]:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
abbr[title],
|
||||
abbr[data-original-title] {
|
||||
text-decoration: underline;
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: .5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -.5em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
-webkit-text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #0056b3;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]):focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
-ms-overflow-style: scrollbar;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
[role="button"],
|
||||
input:not([type="range"]),
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea {
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
color: #868e96;
|
||||
text-align: left;
|
||||
caption-side: bottom;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
button,
|
||||
html [type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
-webkit-appearance: listbox;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: .5rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
outline-offset: -2px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -1,3 +1,15 @@
|
|||
// Visually-hidden mixin
|
||||
@mixin visually-hidden {
|
||||
position: absolute !important;
|
||||
border: 0 !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden !important;
|
||||
clip: rect(0, 0, 0, 0) !important;
|
||||
}
|
||||
|
||||
|
||||
// font-size Mixin
|
||||
// compiles to font-size mobile + font-size desktop on small-plus devices
|
||||
// ex. h2 { @include font-size(h2);}
|
||||
|
|
@ -73,7 +73,16 @@ $weight-medium : 500 !default;
|
|||
$weight-bold : 700 !default;
|
||||
|
||||
// Activate hyphenation on small screens
|
||||
$hyphens: false !default;
|
||||
$hyphens: true !default;
|
||||
|
||||
// Activate Utility classes
|
||||
$utilities: true !default;
|
||||
|
||||
// Activate WordPress reset and styles
|
||||
$wordpress: false !default;
|
||||
|
||||
// Activate IE10-IE11 fixes and old grid system
|
||||
$ie: true !default;
|
||||
|
||||
// ------------
|
||||
// Spacing zone
|
||||
518
sass/base/_reset.scss
Normal file
518
sass/base/_reset.scss
Normal file
|
|
@ -0,0 +1,518 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Reset (global) */
|
||||
/* ----------------------------- */
|
||||
|
||||
/**
|
||||
* disable animations styles when reduced motion is enabled
|
||||
*/
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. switch to border-box model for all elements
|
||||
* 2. avoid min-width: auto and min-height: auto on flex and grid children
|
||||
*/
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box; /* 1 */
|
||||
min-width: 0; /* 2 */
|
||||
min-height: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. remove the grey highlight on links in iOS
|
||||
* 2. prevent orientation font changes in iOS
|
||||
* 3. set base font-size to equiv "10px", which is adapted to rem unit
|
||||
*/
|
||||
|
||||
html {
|
||||
-webkit-tap-highlight-color: transparent; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
font-size: calc(1em * 0.625); /* 3 */
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
@include font-size(base);
|
||||
background-color: $background-base;
|
||||
color: $color-base;
|
||||
font-family: $font-family-base;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
/**
|
||||
* links
|
||||
*/
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
text-decoration: $link-decoration;
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $link-color-hover;
|
||||
text-decoration: $link-decoration-hover;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* headings
|
||||
*/
|
||||
|
||||
h1, .h1-like {
|
||||
@include font-size(h1);
|
||||
@if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
|
||||
font-family: $font-family-headings;
|
||||
}
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
h2, .h2-like {
|
||||
@include font-size(h2);
|
||||
@if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
|
||||
font-family: $font-family-headings;
|
||||
}
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
h3, .h3-like {
|
||||
@include font-size(h3);
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
h4, .h4-like {
|
||||
@include font-size(h4);
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
h5, .h5-like {
|
||||
@include font-size(h5);
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
h6, .h6-like {
|
||||
@include font-size(h6);
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
/**
|
||||
* vertical rythm
|
||||
*/
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
dd {
|
||||
margin-top: 0;
|
||||
margin-bottom: $headings-margin-bottom;
|
||||
}
|
||||
|
||||
p,
|
||||
address,
|
||||
ol,
|
||||
ul,
|
||||
dl,
|
||||
blockquote,
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: $paragraph-margin-bottom;
|
||||
}
|
||||
|
||||
/**
|
||||
* avoid margin on nested elements
|
||||
*/
|
||||
|
||||
li p,
|
||||
li .p-like,
|
||||
li ul,
|
||||
li ol,
|
||||
ol ol,
|
||||
ul ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Reset (common styling) */
|
||||
/* ----------------------------- */
|
||||
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
[role="button"],
|
||||
.btn,
|
||||
.button,
|
||||
[type="button"]
|
||||
input:not([type="range"]),
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea {
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
img,
|
||||
table,
|
||||
td,
|
||||
blockquote,
|
||||
code,
|
||||
pre,
|
||||
textarea,
|
||||
input,
|
||||
video,
|
||||
svg {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* fill color matching to text color
|
||||
*/
|
||||
|
||||
svg:not([fill]) {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
em,
|
||||
.italic,
|
||||
address,
|
||||
cite,
|
||||
i,
|
||||
var {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Reset (buttons) */
|
||||
/* ----------------------------- */
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. show overflow in IE/Edge
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
overflow: visible; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. remove the inheritance of text transform in Firefox
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none; /* 1 */
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText; /* 1 */
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Reset (forms) */
|
||||
/* ----------------------------- */
|
||||
|
||||
form,
|
||||
fieldset {
|
||||
border: none;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding: $spacer-medium;
|
||||
}
|
||||
|
||||
legend {
|
||||
padding: 0 $spacer-tiny;
|
||||
border: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
min-height: 5em;
|
||||
vertical-align: top;
|
||||
resize: vertical;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
progress {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Reset (inputs) */
|
||||
/* ----------------------------- */
|
||||
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
outline-offset: -2px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-search-cancel-button,
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Reset (misc styling) */
|
||||
/* ----------------------------- */
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
white-space: pre-wrap;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
-ms-overflow-style: scrollbar;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
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: 0;
|
||||
background: none;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
sup,
|
||||
sub {
|
||||
vertical-align: 0;
|
||||
}
|
||||
|
||||
sup {
|
||||
bottom: 1ex;
|
||||
}
|
||||
|
||||
sub {
|
||||
top: 0.5ex;
|
||||
}
|
||||
|
||||
/**
|
||||
* quotes, blockquote and hr styling
|
||||
*/
|
||||
|
||||
blockquote {
|
||||
position: relative;
|
||||
padding-left: 3em;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
blockquote::before {
|
||||
content: "\201C";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
font-family: georgia, serif;
|
||||
font-size: 5em;
|
||||
height: .4em;
|
||||
line-height: .9;
|
||||
color: $quote-color;
|
||||
}
|
||||
|
||||
blockquote > footer {
|
||||
margin-top: .75em;
|
||||
font-size: 0.9em;
|
||||
color: rgba(0, 0, 0, .7);
|
||||
|
||||
&::before {
|
||||
content: "\2014 \0020";
|
||||
}
|
||||
}
|
||||
|
||||
q {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
q,
|
||||
.q {
|
||||
quotes: "“" "”" "‘" "’";
|
||||
|
||||
&:lang(fr) {
|
||||
quotes: "«\00a0" "\00a0»" "“" "”";
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
clear: both;
|
||||
height: 1px;
|
||||
margin: 1em 0 2em;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: #ccc;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
figure {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@if variable-exists(hyphens) and $hyphens==true {
|
||||
@media (max-width: ($small - 1)) {
|
||||
body,
|
||||
div,
|
||||
p,
|
||||
textarea,
|
||||
table,
|
||||
td,
|
||||
th,
|
||||
code,
|
||||
pre,
|
||||
samp {
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@if variable-exists(ie) and $ie==true {
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Reset (IE rules) */
|
||||
/* ----------------------------- */
|
||||
|
||||
@-ms-viewport {
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* hide overflow in IE
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -74,23 +74,6 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
@if variable-exists(hyphens) and $hyphens==true {
|
||||
@media (max-width: ($small - 1)) {
|
||||
div,
|
||||
textarea,
|
||||
table,
|
||||
td,
|
||||
th,
|
||||
code,
|
||||
pre,
|
||||
samp {
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
hyphens: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* blocks that need to be placed under floats */
|
||||
|
||||
.clear,
|
||||
|
|
@ -131,10 +114,8 @@
|
|||
/* Global Micro Layout */
|
||||
/* ------------------- */
|
||||
|
||||
/* module, gains superpower "BFC" Block Formating Context */
|
||||
/* "BFC" Block Formating Context */
|
||||
|
||||
.mod,
|
||||
.u-mod,
|
||||
.bfc,
|
||||
.u-bfc {
|
||||
overflow: hidden;
|
||||
|
|
@ -188,14 +169,14 @@ img.u-fr {
|
|||
}
|
||||
|
||||
/* hidden but not for an assistive technology like a screen reader, Yahoo! method */
|
||||
// mixin in `abstracts/_mixins.scss`
|
||||
.visually-hidden {
|
||||
position: absolute !important;
|
||||
border: 0 !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden !important;
|
||||
clip: rect(0, 0, 0, 0) !important;
|
||||
@include visually-hidden;
|
||||
}
|
||||
@include respond-to("small") {
|
||||
.small-visually-hidden {
|
||||
@include visually-hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.is-disabled,
|
||||
|
|
@ -216,9 +197,6 @@ ul {
|
|||
}
|
||||
}
|
||||
|
||||
.color--inverse {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
/* Width Helpers */
|
||||
/* ------------- */
|
||||
|
|
@ -22,8 +22,8 @@ $grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
|
|||
// https://github.com/alsacreations/KNACSS/issues/133;
|
||||
$iefix: 0.01px;
|
||||
@media (min-width: $small) {
|
||||
[class*=" grid-"],
|
||||
[class^="grid-"] {
|
||||
[class*=" grillade-"],
|
||||
[class^="grillade-"] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -66,8 +66,8 @@ $iefix: 0.01px;
|
|||
}
|
||||
// Mono-line grid constructor (.grid)
|
||||
@media (min-width: $small) {
|
||||
.grid,
|
||||
.grid--reverse {
|
||||
.grillade,
|
||||
.grillade--reverse {
|
||||
display: flex;
|
||||
|
||||
& > * {
|
||||
|
|
@ -86,7 +86,7 @@ $iefix: 0.01px;
|
|||
// Constructing grids : will be compiled in CSS
|
||||
@media (min-width: $small) {
|
||||
@for $i from 2 through $cols {
|
||||
[class*="grid-#{$i}"] {
|
||||
[class*="grillade-#{$i}"] {
|
||||
@include grid(#{$i}, 0);
|
||||
}
|
||||
}
|
||||
|
|
@ -110,7 +110,7 @@ $iefix: 0.01px;
|
|||
order: 1;
|
||||
}
|
||||
|
||||
[class*="grid-"][class*="--reverse"] {
|
||||
[class*="grillade-"][class*="--reverse"] {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
// sizing individual children
|
||||
|
|
@ -8,16 +8,16 @@
|
|||
|
||||
// use these variables only for a standalone Grillade
|
||||
// in KNACSS, you shall modify variables file instead
|
||||
$tiny: 480px !default;
|
||||
$medium: 768px !default;
|
||||
$cols: 12 !default;
|
||||
$tiny : 480px !default;
|
||||
$medium : 768px !default;
|
||||
$large : 992px !default;
|
||||
$cols : 12 !default;
|
||||
|
||||
// classic Grid
|
||||
[class*=" grid-"],
|
||||
[class^="grid-"] {
|
||||
[class*=" grillade-"],
|
||||
[class^="grillade-"] {
|
||||
@media (min-width: $tiny) {
|
||||
display: grid;
|
||||
grid-auto-flow: dense;
|
||||
|
||||
// gutters
|
||||
@if variable_exists(grid-gutters) {
|
||||
|
|
@ -35,8 +35,8 @@ $cols: 12 !default;
|
|||
}
|
||||
|
||||
// autogrid
|
||||
.autogrid,
|
||||
.grid {
|
||||
.autogrillade,
|
||||
.grillade {
|
||||
@media (min-width: $tiny) {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
|
|
@ -57,9 +57,9 @@ $cols: 12 !default;
|
|||
}
|
||||
}
|
||||
|
||||
// grid constructor (.grid-2 to .grid-$cols)
|
||||
// grid constructor (.grillade-2 to .grillade-$cols)
|
||||
@for $i from 2 through $cols {
|
||||
[class*="grid-#{$i}"] {
|
||||
[class*="grillade-#{$i}"] {
|
||||
grid-template-columns: repeat(#{$i}, 1fr);
|
||||
}
|
||||
}
|
||||
|
|
@ -75,12 +75,31 @@ $cols: 12 !default;
|
|||
}
|
||||
}
|
||||
|
||||
/* intermediate breakpoints */
|
||||
/* medium intermediate breakpoints */
|
||||
// -medium-X suffix means "X columns when < large screen"
|
||||
// example : .grillade-4-medium-2 will be 1 column (< tiny) then 2 columns (< large) then 4 columns
|
||||
@media (min-width: $tiny) and (max-width: ($large - 1)) {
|
||||
@for $i from 1 through 4 {
|
||||
[class*="grillade-"][class*="-medium-#{$i}"] {
|
||||
grid-template-columns: repeat(#{$i}, 1fr);
|
||||
}
|
||||
|
||||
[class*="col-"][class*="-medium-#{$i}"] {
|
||||
grid-column: auto / span #{$i};
|
||||
}
|
||||
}
|
||||
|
||||
[class*="-medium-all"] {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
/* small intermediate breakpoints */
|
||||
// -small-X suffix means "X columns when < medium screen"
|
||||
// example : .grid-4-small-2 will be 1 column (< tiny) then 2 columns (< medium) then 4 columns
|
||||
// example : .grillade-4-small-2 will be 1 column (< tiny) then 2 columns (< medium) then 4 columns
|
||||
@media (min-width: $tiny) and (max-width: ($medium - 1)) {
|
||||
@for $i from 1 through 4{
|
||||
[class*="grid-"][class*="-small-#{$i}"] {
|
||||
@for $i from 1 through 4 {
|
||||
[class*="grillade-"][class*="-small-#{$i}"] {
|
||||
grid-template-columns: repeat(#{$i}, 1fr);
|
||||
}
|
||||
|
||||
|
|
@ -94,6 +113,31 @@ $cols: 12 !default;
|
|||
}
|
||||
}
|
||||
|
||||
// grid overall alignment
|
||||
[class*="-start"] {
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
[class*="-end"] {
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
[class*="-center"] {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
[class*="-space-between"] {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
[class*="-space-around"] {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
[class*="-space-evenly"] {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
// grid order
|
||||
.item-first {
|
||||
order: -1;
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Buttons */
|
||||
/* ==Buttons styling */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* preferably use <button> for buttons !*/
|
||||
/* use .btn-- or .button-- classes for variants */
|
||||
|
||||
|
|
@ -19,9 +20,6 @@
|
|||
border: none;
|
||||
border-radius: $border-radius;
|
||||
background-color: $color-muted;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.btn,
|
||||
|
|
|
|||
|
|
@ -1,28 +1,6 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Forms */
|
||||
/* ==Forms styling */
|
||||
/* ----------------------------- */
|
||||
/* thanks to HTML5boilerplate and https://shoelace.style/ */
|
||||
|
||||
/* forms items */
|
||||
form,
|
||||
fieldset {
|
||||
border: none;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding: $spacer-medium;
|
||||
|
||||
& legend {
|
||||
padding: 0 $spacer-tiny;
|
||||
border: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[type="color"],
|
||||
[type="date"],
|
||||
|
|
@ -107,8 +85,3 @@ input::placeholder,
|
|||
textarea::placeholder {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
progress {
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
|
||||
/*
|
||||
1- Reboot (basic reset)
|
||||
2- Libraries :
|
||||
- Base
|
||||
2- Base :
|
||||
- Reset
|
||||
- Print
|
||||
- Layout (alignment, modules, positionning)
|
||||
- Utilities (width and spacers helpers)
|
||||
|
|
@ -30,35 +30,36 @@
|
|||
- Alerts
|
||||
*/
|
||||
|
||||
@import "_vendor/reboot"; // Bootstrap reboot (basic reset) (CSS file renamed and imported as if it was a partial because of libsass)
|
||||
|
||||
// WARNING : you should comment the following @import (variables)
|
||||
// and move variables file from knacss folder to your own project folder!
|
||||
@import "_config/variables";
|
||||
// and move variables file from KNACSS folder to your own project folder!
|
||||
@import "abstracts/variables";
|
||||
|
||||
@import "_config/mixins";
|
||||
@import "abstracts/mixins";
|
||||
|
||||
// Core Libraries
|
||||
@import "_library/base"; // basic styles
|
||||
@import "_library/print"; // print quick reset
|
||||
@import "_library/layout"; // alignment, modules, positionning
|
||||
@import "_library/utilities"; // width and spacer helpers
|
||||
@import "_library/responsive"; // Responsive Web Design helpers
|
||||
// @import "_library/wordpress"; // WordPress reset and basic styles
|
||||
@import "base/reset"; // basic styles
|
||||
@import "base/print"; // print quick reset
|
||||
@import "base/layout"; // alignment, modules, positionning
|
||||
|
||||
// New Grid System by default (Grid Layout). If you prefer old "Flexbox" Grid System, replace file with "_library/grillade-flex"
|
||||
// New Grid System by default (Grid Layout).
|
||||
// If you prefer old "Flexbox" Grid System, replace file with "base/grillade-flex"
|
||||
// Note that none of these files are prefixed by an underscore, in order to compile them.
|
||||
@import "_library/grillade-grid"; // grid system with Grid Layout
|
||||
@import "base/grillade-grid"; // grid system with Grid Layout
|
||||
|
||||
// Components
|
||||
@import "components/alerts"; // alerts styles
|
||||
@import "components/arrows"; // arrows styles
|
||||
@import "components/badges"; // badges styles
|
||||
@import "components/buttons"; // buttons styles
|
||||
@import "components/checkbox"; // checkbox, radio, switch styles
|
||||
@import "components/forms"; // forms consistency and styles
|
||||
@import "components/media"; // media object
|
||||
@import "components/skip-links"; // skip links
|
||||
@import "components/tables"; // data tables consistency
|
||||
@import "components/forms"; // forms consistency and styles
|
||||
@import "components/buttons"; // buttons styles
|
||||
@import "components/checkbox"; // checkbox, radio, switch styles
|
||||
@import "components/tabs"; // tabs styles
|
||||
@import "components/arrows"; // arrows styles
|
||||
@import "components/tags"; // tags styles
|
||||
@import "components/badges"; // badges styles
|
||||
@import "components/alerts"; // alerts styles
|
||||
@import "components/tags"; // tags styles
|
||||
|
||||
// Utilities
|
||||
@import "base/utilities"; // width and spacer helpers
|
||||
@import "base/responsive"; // Responsive Web Design helpers
|
||||
// @import "base/wordpress"; // WordPress reset and basic styles
|
||||
Loading…
Reference in a new issue