Merge branch 'v8'
# Conflicts: # .sass-lint.yml # README.md # bower.json # changelog.md # css/grillade-flex.css # css/grillade-grid.css # css/knacss-unminified.css # css/knacss.css # package-lock.json # package.json # sass/abstracts/_mixins.scss # sass/abstracts/_variables.scss # sass/base/_responsive.scss # sass/base/_utilities.scss # sass/base/_wordpress.scss # sass/base/grillade-flex.scss # sass/base/grillade-grid.scss # sass/components/_alerts.scss # sass/components/_arrows.scss # sass/components/_badges.scss # sass/components/_buttons.scss # sass/components/_forms.scss # sass/components/_media.scss # sass/components/_skip-links.scss # sass/components/_tables.scss # sass/components/_tabs.scss # sass/components/_tags.scss # sass/knacss.scss # yarn.lock
This commit is contained in:
Raphaël Goetter
commit
dcf44e2f24
52 changed files with 2292 additions and 14713 deletions
|
|
@ -1,2 +1,2 @@
|
|||
>0.25%
|
||||
>1.5%
|
||||
not op_mini all
|
||||
5
.gitignore
vendored
5
.gitignore
vendored
|
|
@ -93,6 +93,7 @@ DocProject/Help/*.hhp
|
|||
DocProject/Help/Html2
|
||||
DocProject/Help/html
|
||||
|
||||
|
||||
# Click-Once directory
|
||||
publish
|
||||
|
||||
|
|
@ -167,8 +168,10 @@ pip-log.txt
|
|||
# parce qu'on s'en fout
|
||||
*.log
|
||||
|
||||
# parce que trop lourd
|
||||
# parce que trop lourd, ...
|
||||
node_modules/
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
|
||||
# parce que certaines personnes utilisent de vrais IDEs
|
||||
.idea
|
||||
|
|
|
|||
|
|
@ -1,91 +0,0 @@
|
|||
options:
|
||||
formatter: stylish
|
||||
files:
|
||||
include: '**/*.s+(a|c)ss'
|
||||
rules:
|
||||
# Extends
|
||||
extends-before-mixins: 1
|
||||
extends-before-declarations: 1
|
||||
placeholder-in-extend: 1
|
||||
|
||||
# Mixins
|
||||
mixins-before-declarations: 1
|
||||
|
||||
# Line Spacing
|
||||
one-declaration-per-line: 1
|
||||
empty-line-between-blocks: 1
|
||||
single-line-per-selector: 1
|
||||
|
||||
# Disallows
|
||||
no-attribute-selectors: 0
|
||||
no-color-hex: 0
|
||||
no-color-keywords: 0 # Modified, was 1
|
||||
no-color-literals: 0 # Modified, was 1
|
||||
no-combinators: 0
|
||||
no-css-comments: 0 # Modified, was 1
|
||||
no-debug: 1
|
||||
no-disallowed-properties: 0
|
||||
no-duplicate-properties: 1
|
||||
no-empty-rulesets: 1
|
||||
no-extends: 0
|
||||
no-ids: 1
|
||||
no-important: 0 # Modified, was 1
|
||||
no-invalid-hex: 1
|
||||
no-mergeable-selectors: 1
|
||||
no-misspelled-properties: 1
|
||||
no-qualifying-elements: 1
|
||||
no-trailing-whitespace: 1
|
||||
no-trailing-zero: 1
|
||||
no-transition-all: 1
|
||||
no-universal-selectors: 0
|
||||
no-url-protocols: 1
|
||||
no-vendor-prefixes: 1
|
||||
no-warn: 1
|
||||
property-units: 0
|
||||
|
||||
# Nesting
|
||||
force-attribute-nesting: 1
|
||||
force-element-nesting: 1
|
||||
force-pseudo-nesting: 1
|
||||
|
||||
# Name Formats
|
||||
class-name-format: 1
|
||||
function-name-format: 1
|
||||
id-name-format: 0
|
||||
mixin-name-format: 1
|
||||
placeholder-name-format: 1
|
||||
variable-name-format: 1
|
||||
|
||||
# Style Guide
|
||||
attribute-quotes: 1
|
||||
bem-depth: 0
|
||||
border-zero: 0 # Modified, was 1
|
||||
brace-style: 1
|
||||
clean-import-paths: 0 # 1 forbids leading underscores and extensions (.scss)
|
||||
empty-args: 1
|
||||
hex-length: 1
|
||||
hex-notation: 1
|
||||
indentation: 1
|
||||
leading-zero: 0 # Modified, was 1
|
||||
nesting-depth: 1
|
||||
property-sort-order: 0 # Modified, was 1 @TODO Est-ce possible de customiser pour respecter la convention Alsa ?
|
||||
pseudo-element: 1
|
||||
quotes: 0 # 1 warns that strings should use single quotes
|
||||
shorthand-values: 1
|
||||
url-quotes: 1
|
||||
variable-for-property: 1
|
||||
zero-unit: 1
|
||||
|
||||
# Inner Spacing
|
||||
space-after-comma: 1
|
||||
space-before-colon: 1
|
||||
space-after-colon: 1
|
||||
space-before-brace: 1
|
||||
space-before-bang: 1
|
||||
space-after-bang: 1
|
||||
space-between-parens: 1
|
||||
space-around-operator: 1
|
||||
|
||||
# Final Items
|
||||
trailing-semicolon: 1
|
||||
final-newline: 1
|
||||
36
README.md
Executable file → Normal file
36
README.md
Executable file → Normal file
|
|
@ -6,9 +6,7 @@ KNACSS, c'est une sorte de feuille de style CSS "reset" sur-vitaminée qui perme
|
|||
|
||||
**Né en 2012 et après près de 10 années de bons et loyaux services, le projet initial « KNACSS » d'Alsacréations laisse place à une toute nouvelle version, totalement remaniée : KNACSS Reborn.**
|
||||
|
||||
**Cette version n'est plus maintenue et n'est pas compatible avec les versions récentes. Ne changez pas de version sans nécessité, vous prendriez le risque de casser la compatibilité avec vos projets en cours.**
|
||||
|
||||
## Documentation version actuelle
|
||||
## Documentation version actuelle (v8 = Reborn)
|
||||
|
||||
- Site web de présentation de KNACSS Reborn : <http://knacss.com>
|
||||
- [**Documentation KNACSS Reborn**](https://www.knacss.com/doc.html)
|
||||
|
|
@ -17,3 +15,35 @@ KNACSS, c'est une sorte de feuille de style CSS "reset" sur-vitaminée qui perme
|
|||
|
||||
- [**Documentation KNACSS v7**](https://www.knacss.com/doc-old.html)
|
||||
- [**Pense-bête PDF version 7**](https://www.knacss.com/assets/pdf/knacss7-cheatsheet.pdf)
|
||||
|
||||
## Modulaire
|
||||
|
||||
Principe de briques modulaires :
|
||||
|
||||
- KNACSS Reborn est constitué uniquement des fichiers "Core".
|
||||
- Les fichiers "Utils" seront des briques optionnelles (= les `@import` seront commentés par défaut).
|
||||
|
||||
```scss
|
||||
// CORE
|
||||
@import "abstracts/variables-sass";
|
||||
|
||||
@import "base/reset-base";
|
||||
@import "base/reset-accessibility";
|
||||
@import "base/reset-forms";
|
||||
@import "base/reset-print";
|
||||
@import "base/layout";
|
||||
|
||||
@import "abstracts/mixins-sass";
|
||||
|
||||
// UTILITY CLASSES
|
||||
// @import "utils/utils-global";
|
||||
// @import "utils/utils-spacers";
|
||||
// @import "utils/grillade";
|
||||
|
||||
// COMPONENTS (add them only if you need)
|
||||
// @import "components/button";
|
||||
// @import "components/burger";
|
||||
// @import "components/checkbox";
|
||||
// @import "components/radio";
|
||||
// @import "components/quote";
|
||||
```
|
||||
|
|
|
|||
31
bower.json
31
bower.json
|
|
@ -1,31 +0,0 @@
|
|||
{
|
||||
"name": "KNACSS",
|
||||
"version": "7.1.3",
|
||||
"homepage": "http://www.knacss.com/",
|
||||
"authors": [
|
||||
"Raphaël GOETTER, Alsacreations"
|
||||
],
|
||||
"description": "KNACSS is a minimalist, responsive and extensible style sheet to kick-start your HTML / CSS projects. It relies on common best practices and experience on the topic.",
|
||||
"main": "css/knacss.css",
|
||||
"keywords": [
|
||||
"css",
|
||||
"framework",
|
||||
"reset",
|
||||
"responsive",
|
||||
"less",
|
||||
"sass",
|
||||
"rwd",
|
||||
"boilerplate",
|
||||
"workflow"
|
||||
],
|
||||
"license": "WTFPL",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"less/knackLESS.zip",
|
||||
"tests",
|
||||
"README.md"
|
||||
]
|
||||
}
|
||||
12
changelog.md
12
changelog.md
|
|
@ -1,8 +1,16 @@
|
|||
# Changelog
|
||||
|
||||
## Changelog 2020/11
|
||||
- 26 novembre 2020 : Documentation + V1.0.0
|
||||
- 22 octobre 2020 : grosse remise à jour. V0.9.0
|
||||
- 12 octobre 2020 : début de refonte classes utilitaires
|
||||
- 11 août 2020 : refonte des composants principaux
|
||||
- 19 mai 2020 : fichier de composant `button.scss` et mixin Sass
|
||||
- 29 février 2020 : feuille de style accessibilité
|
||||
- 13 février 2020 : on repart de zéro...
|
||||
|
||||
Né en 2012 et après près de 10 années de bons et loyaux services, le projet initial « KNACSS » d'Alsacréations laisse place à une toute nouvelle version, totalement remaniée : KNACSS Reborn.
|
||||
## Changelog 2020
|
||||
|
||||
Né en 2012 et après près de 10 années de bons et loyaux services, le projet initial « KNACSS » d'Alsacréations laisse place à une toute nouvelle version, totalement remaniée : KNACSS Reborn, correspondant à la Branche et version 8.
|
||||
|
||||
## Changelog v8.0.0 (xxx 2019)
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
@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}
|
||||
1
css/grillade/grillade.css
Normal file
1
css/grillade/grillade.css
Normal file
File diff suppressed because one or more lines are too long
669
css/knacss-full/knacss.css
Normal file
669
css/knacss-full/knacss.css
Normal file
|
|
@ -0,0 +1,669 @@
|
|||
/*!
|
||||
* KNACSS Reborn: Just keep it simple!
|
||||
* @author: Alsacreations
|
||||
* v1.0.0 2020/11
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
/* ----------------------------- */
|
||||
/* ==Reset (base) */
|
||||
/* ----------------------------- */
|
||||
/*
|
||||
* 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. Breaks words to prevent overflow in all browsers
|
||||
*/
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
/* 1 */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* 2 */
|
||||
overflow-wrap: break-word;
|
||||
/* 3 */
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.5;
|
||||
background-color: #ffffff;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
/*
|
||||
* Headings
|
||||
*/
|
||||
h1,
|
||||
.h1-like,
|
||||
h2,
|
||||
.h2-like,
|
||||
h3,
|
||||
.h3-like,
|
||||
h4,
|
||||
.h4-like,
|
||||
h5,
|
||||
.h5-like,
|
||||
h6,
|
||||
.h6-like {
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
/*
|
||||
* Links
|
||||
*/
|
||||
a {
|
||||
color: #454d5d;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:hover,
|
||||
a:active {
|
||||
color: #212529;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
abbr[title] {
|
||||
border-bottom: none;
|
||||
/* 1 */
|
||||
text-decoration: underline;
|
||||
/* 2 */
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Vertical rythm
|
||||
*/
|
||||
h1,
|
||||
.h1-like,
|
||||
h2,
|
||||
.h2-like {
|
||||
margin-top: 0;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
p,
|
||||
address,
|
||||
ol,
|
||||
ul,
|
||||
dl,
|
||||
blockquote,
|
||||
pre,
|
||||
h3,
|
||||
.h3-like,
|
||||
h4,
|
||||
.h4-like,
|
||||
h5,
|
||||
.h5-like,
|
||||
h6,
|
||||
.h6-like,
|
||||
dt,
|
||||
dd {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Nested elements
|
||||
*/
|
||||
ol ol,
|
||||
ol ul,
|
||||
ul ol,
|
||||
ul ul,
|
||||
li ul,
|
||||
li ol,
|
||||
nav ul,
|
||||
nav ol,
|
||||
li p,
|
||||
li .p-like {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Lists
|
||||
*/
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
nav ul,
|
||||
nav ol {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Embed content
|
||||
*/
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
img,
|
||||
table,
|
||||
td,
|
||||
blockquote,
|
||||
pre,
|
||||
code,
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
video,
|
||||
svg,
|
||||
iframe {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
iframe,
|
||||
img,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the border on iframes in all browsers
|
||||
*/
|
||||
iframe {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Fill color matching to text color
|
||||
*/
|
||||
svg:not([fill]) {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
/*
|
||||
* Hide the overflow in IE
|
||||
*/
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
* Tables
|
||||
*/
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
/*
|
||||
* Rulers
|
||||
*/
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
border: 0;
|
||||
border-top: 1px solid;
|
||||
margin: 2rem 0;
|
||||
clear: both;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
* table styles
|
||||
*/
|
||||
table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
vertical-align: top;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Hidden but not for an assistive technology like a screen reader, Yahoo! method
|
||||
*/
|
||||
.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;
|
||||
}
|
||||
|
||||
/*
|
||||
* Disable animations styles when reduced motion is enabled
|
||||
*/
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Change the cursor on busy elements in all browsers.
|
||||
*/
|
||||
[aria-busy="true"] {
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
/*
|
||||
* Change the cursor on control elements in all browsers.
|
||||
*/
|
||||
[aria-controls] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*
|
||||
* Change the cursor on disabled, not-editable, or otherwise
|
||||
* inoperable elements in all browsers.
|
||||
*/
|
||||
[aria-disabled="true"],
|
||||
[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/*
|
||||
* Change the display on visually hidden accessible elements
|
||||
* in all browsers.
|
||||
*/
|
||||
[aria-hidden="false"][hidden] {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
[aria-hidden="false"][hidden]:not(:focus) {
|
||||
clip: rect(0, 0, 0, 0);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Reset (forms) */
|
||||
/* ----------------------------- */
|
||||
/*
|
||||
* Remove the tapping delay on clickable elements in all browsers .
|
||||
*/
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea,
|
||||
[tabindex] {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Change the inconsistent appearance in all browsers.
|
||||
* 2. Add typography inheritance in all browsers.
|
||||
*/
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
/* 1 */
|
||||
color: inherit;
|
||||
/* 1 */
|
||||
font-family: inherit;
|
||||
/* 2 */
|
||||
font-size: inherit;
|
||||
/* 2 */
|
||||
line-height: inherit;
|
||||
/* 2 */
|
||||
letter-spacing: inherit;
|
||||
/* 2 */
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/*
|
||||
* Basic User Interface reset
|
||||
*/
|
||||
button,
|
||||
input:not([type="radio"]):not([type="checkbox"]),
|
||||
select,
|
||||
textarea {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
/* 1 */
|
||||
font-size: 1em;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
pre {
|
||||
-moz-tab-size: 2;
|
||||
tab-size: 2;
|
||||
white-space: pre-wrap;
|
||||
line-height: normal;
|
||||
overflow: auto;
|
||||
-ms-overflow-style: scrollbar;
|
||||
}
|
||||
|
||||
/*
|
||||
* Show overflow in IE/Edge
|
||||
*/
|
||||
button,
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the inheritance of text transform in Firefox
|
||||
*/
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
form,
|
||||
fieldset {
|
||||
border: none;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
legend {
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
padding: 0 0.5rem;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
vertical-align: top;
|
||||
resize: vertical;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
progress {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* Form oddities */
|
||||
/* ----------------------------- */
|
||||
/*
|
||||
* 1. Correct the odd appearance in Chrome, Edge, and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
/* 1 */
|
||||
outline-offset: -2px;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Correct the cursor style of increment and decrement buttons in Safari.
|
||||
*/
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Correct the text style of placeholders in Chrome, Edge, and Safari.
|
||||
*/
|
||||
::-webkit-input-placeholder {
|
||||
color: inherit;
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the inner padding in Chrome, Edge, and Safari on macOS.
|
||||
*/
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Correct the inability to style upload buttons in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
/* 1 */
|
||||
font: inherit;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the inner border and padding of focus outlines in Firefox.
|
||||
*/
|
||||
::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Restore the focus outline styles unset by the previous rule in Firefox.
|
||||
*/
|
||||
:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the additional :invalid styles in Firefox.
|
||||
*/
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Print (quick print reset) */
|
||||
/* ----------------------------- */
|
||||
@media print {
|
||||
* {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
body {
|
||||
width: auto;
|
||||
margin: auto;
|
||||
font-family: serif;
|
||||
font-size: 12pt;
|
||||
}
|
||||
p,
|
||||
.p-like,
|
||||
h1,
|
||||
.h1-like,
|
||||
h2,
|
||||
.h2-like,
|
||||
h3,
|
||||
.h3-like,
|
||||
h4,
|
||||
.h4-like,
|
||||
h5,
|
||||
.h5-like,
|
||||
h6,
|
||||
.h6-like,
|
||||
blockquote,
|
||||
label,
|
||||
ul,
|
||||
ol {
|
||||
color: #000;
|
||||
margin: auto;
|
||||
}
|
||||
.print {
|
||||
display: block;
|
||||
}
|
||||
.no-print {
|
||||
display: none;
|
||||
}
|
||||
/* no orphans, no widows */
|
||||
p,
|
||||
.p-like,
|
||||
blockquote {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
/* no breaks inside these elements */
|
||||
blockquote,
|
||||
ul,
|
||||
ol {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
/* page break before main headers
|
||||
h1,
|
||||
.h1-like {
|
||||
page-break-before: always;
|
||||
}
|
||||
*/
|
||||
/* no breaks after these elements */
|
||||
h1,
|
||||
.h1-like,
|
||||
h2,
|
||||
.h2-like,
|
||||
h3,
|
||||
.h3-like,
|
||||
caption {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
/* displaying URLs
|
||||
a[href]::after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
*/
|
||||
a[href^="javascript:"]::after,
|
||||
a[href^="#"]::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------- */
|
||||
/* ==Layout classes */
|
||||
/* ----------------------------- */
|
||||
/* Global container */
|
||||
.layout-maxed {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.layout-maxed {
|
||||
grid-template-columns: minmax(1rem, 1fr) minmax(auto, 576px) minmax(1rem, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.layout-maxed {
|
||||
grid-template-columns: minmax(1rem, 1fr) minmax(auto, 768px) minmax(1rem, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.layout-maxed {
|
||||
grid-template-columns: minmax(1rem, 1fr) minmax(auto, 1024px) minmax(1rem, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
.layout-maxed {
|
||||
grid-template-columns: minmax(1rem, 1fr) minmax(auto, 1330px) minmax(1rem, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Center all children */
|
||||
.layout-maxed > * {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
/* Hero box */
|
||||
.layout-hero {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: inherit;
|
||||
}
|
||||
|
||||
.layout-hero > * {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
/* Hero image */
|
||||
.layout-hero-img {
|
||||
grid-column: 1 / -1;
|
||||
justify-self: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
1
css/knacss-mini/knacss.css
Normal file
1
css/knacss-mini/knacss.css
Normal file
|
|
@ -0,0 +1 @@
|
|||
/*! KNACSS Reborn: Just keep it simple! @author: Alsacreations v1.0.0 2020/11 Licence WTFPL http://www.wtfpl.net/ */*,:after,:before{box-sizing:border-box;min-width:0;min-height:0}html{font-size:62.5%;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overflow-wrap:break-word}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:1.6rem;line-height:1.5;background-color:#fff}.h1-like,.h2-like,.h3-like,.h4-like,.h5-like,.h6-like,body,h1,h2,h3,h4,h5,h6{color:#212529}a{color:#454d5d;text-decoration:underline}a:active,a:focus,a:hover{color:#212529;text-decoration:underline}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.h1-like,.h2-like,h1,h2{margin-top:0;margin-bottom:2rem}.h3-like,.h4-like,.h5-like,.h6-like,address,blockquote,dd,dl,dt,h3,h4,h5,h6,ol,p,pre,ul{margin-top:0;margin-bottom:1rem}li .p-like,li ol,li p,li ul,nav ol,nav ul,ol ol,ol ul,ul ol,ul ul{margin-top:0;margin-bottom:0}ol,ul{padding-left:2rem}nav ol,nav ul{list-style:none;padding:0}audio,canvas,iframe,img,svg,video{vertical-align:middle}blockquote,code,iframe,img,input,pre,select,svg,table,td,textarea,video{max-width:100%}iframe,img,input,select,textarea{height:auto}iframe,img{border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}hr{box-sizing:initial;height:0;overflow:visible;border:0;border-top:1px solid;margin:2rem 0;clear:both;color:inherit}table{width:100%;max-width:100%;table-layout:fixed;border-collapse:collapse;vertical-align:top;margin-bottom:2rem}.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}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{touch-action:manipulation}button,input,select,textarea{margin:0;background-color:initial;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;letter-spacing:inherit;vertical-align:middle}button,input:not([type=radio]):not([type=checkbox]),select,textarea{border:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}pre{-moz-tab-size:2;tab-size:2;white-space:pre-wrap;line-height:normal;overflow:auto;-ms-overflow-style:scrollbar}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}fieldset,form{border:none}fieldset{margin:0;padding:2rem}legend{display:table;max-width:100%;padding:0 .5rem;border:0;color:inherit;white-space:normal}label{display:inline-block;cursor:pointer}textarea{overflow:auto;vertical-align:top;resize:vertical;white-space:pre-wrap}progress{width:100%;vertical-align:initial}output,progress{display:inline-block}summary{display:list-item}template{display:none}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}.layout-maxed{display:grid}.layout-maxed>*{grid-column:2}.layout-hero{grid-column:1/-1;display:grid;grid-template-columns:inherit}.layout-hero>*{grid-column:2}.layout-hero-img{grid-column:1/-1;justify-self:center;max-width:100%}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media print{*{background:transparent!important;box-shadow:none!important;text-shadow:none!important}body{width:auto;margin:auto;font-family:serif;font-size:12pt}.h1-like,.h2-like,.h3-like,.h4-like,.h5-like,.h6-like,.p-like,blockquote,h1,h2,h3,h4,h5,h6,label,ol,p,ul{color:#000;margin:auto}.print{display:block}.no-print{display:none}.p-like,blockquote,p{orphans:3;widows:3}blockquote,ol,ul{page-break-inside:avoid}.h1-like,.h2-like,.h3-like,caption,h1,h2,h3{page-break-after:avoid}a{color:#000}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}}@media (min-width:576px){.layout-maxed{grid-template-columns:minmax(1rem,1fr) minmax(auto,576px) minmax(1rem,1fr)}}@media (min-width:768px){.layout-maxed{grid-template-columns:minmax(1rem,1fr) minmax(auto,768px) minmax(1rem,1fr)}}@media (min-width:1024px){.layout-maxed{grid-template-columns:minmax(1rem,1fr) minmax(auto,1024px) minmax(1rem,1fr)}}@media (min-width:1330px){.layout-maxed{grid-template-columns:minmax(1rem,1fr) minmax(auto,1330px) minmax(1rem,1fr)}}
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
108
gulpfile.js
108
gulpfile.js
|
|
@ -1,74 +1,56 @@
|
|||
// Requires
|
||||
var gulp = require('gulp');
|
||||
|
||||
// Include plugins
|
||||
var postcss = require('gulp-postcss');
|
||||
const gulp = require('gulp');
|
||||
var sass = require('gulp-sass');
|
||||
var postcss = require('gulp-postcss');
|
||||
var CombineMQ = require('postcss-combine-media-query');
|
||||
var autoprefixer = require('autoprefixer');
|
||||
var CSSnano = require('cssnano');
|
||||
var rename = require('gulp-rename');
|
||||
|
||||
var cssnano = require('cssnano'); // minifies CSS
|
||||
var autoprefixer = require('autoprefixer');
|
||||
|
||||
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 plugins = [
|
||||
unprefix(),
|
||||
autoprefixer({
|
||||
grid: true
|
||||
}),
|
||||
flexbugs(),
|
||||
gaps()
|
||||
];
|
||||
|
||||
var pluginsProd = [
|
||||
unprefix(),
|
||||
autoprefixer({
|
||||
grid: true
|
||||
}),
|
||||
flexbugs(),
|
||||
gaps(),
|
||||
cssnano()
|
||||
];
|
||||
|
||||
// tâche cssDev = compile vers knacss-unminified.css
|
||||
gulp.task('cssDev', () => {
|
||||
return gulp.src('./sass/knacss.scss')
|
||||
.pipe(sass({
|
||||
outputStyle: 'expanded' // CSS non minifiée plus lisible ('}' à la ligne)
|
||||
}))
|
||||
.pipe(postcss(plugins))
|
||||
.pipe(rename('knacss-unminified.css'))
|
||||
.pipe(gulp.dest('./css/'));
|
||||
gulp.task('css:full', () => {
|
||||
return gulp.src('sass/knacss.scss')
|
||||
.pipe(sass(
|
||||
{
|
||||
outputStyle: 'expanded'
|
||||
}))
|
||||
.pipe(
|
||||
postcss([
|
||||
autoprefixer, // ajoute les préfixes vendeurs
|
||||
]))
|
||||
.pipe(gulp.dest('css/knacss-full'));
|
||||
});
|
||||
|
||||
// tâche cssProd = compile vers knacss.css minifié
|
||||
gulp.task('cssProd', () => {
|
||||
return gulp.src('./sass/knacss.scss')
|
||||
.pipe(sass())
|
||||
.pipe(postcss(pluginsProd))
|
||||
.pipe(gulp.dest('./css/'));
|
||||
gulp.task('css:mini', () => {
|
||||
return gulp.src('sass/knacss.scss')
|
||||
.pipe(sass(
|
||||
{
|
||||
outputStyle: 'compact'
|
||||
}))
|
||||
.pipe(
|
||||
postcss([
|
||||
CombineMQ, // rassemble les Media Queries (parfait pour les classes utilitaires)
|
||||
autoprefixer, // ajoute les préfixes vendeurs
|
||||
CSSnano // minification
|
||||
]))
|
||||
.pipe(gulp.dest('css/knacss-mini'));
|
||||
});
|
||||
|
||||
gulp.task('grillade', () => {
|
||||
return gulp.src('./sass/base/grillade-grid.scss')
|
||||
.pipe(sass())
|
||||
.pipe(postcss(pluginsProd))
|
||||
.pipe(gulp.dest('./css/'));
|
||||
gulp.task('css:grillade', () => {
|
||||
return gulp.src('sass/utils/grillade.scss')
|
||||
.pipe(sass(
|
||||
{
|
||||
outputStyle: 'compact'
|
||||
}))
|
||||
.pipe(
|
||||
postcss([
|
||||
CombineMQ, // rassemble les Media Queries (parfait pour les classes utilitaires)
|
||||
autoprefixer, // ajoute les préfixes vendeurs
|
||||
CSSnano // minification
|
||||
]))
|
||||
.pipe(gulp.dest('css/grillade'));
|
||||
});
|
||||
|
||||
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', () => {
|
||||
gulp.watch(['./sass/*.scss'], gulp.series('cssDev'));
|
||||
});
|
||||
// Tâche BUILD : tapez "gulp" ou "gulp build"
|
||||
gulp.task('build', gulp.series('css:full', 'css:mini', 'css:grillade'));
|
||||
|
||||
// Tâche par défaut
|
||||
gulp.task('default', gulp.series('cssDev', 'cssProd', 'grillade', 'grillade-flex'));
|
||||
gulp.task('default', gulp.series('build'));
|
||||
|
|
|
|||
5412
package-lock.json
generated
5412
package-lock.json
generated
File diff suppressed because it is too large
Load diff
47
package.json
Executable file → Normal file
47
package.json
Executable file → Normal file
|
|
@ -1,40 +1,15 @@
|
|||
{
|
||||
"name": "knacss",
|
||||
"version": "7.1.3",
|
||||
"homepage": "http://www.knacss.com/",
|
||||
"bugs": "https://github.com/alsacreations/KNACSS/issues",
|
||||
"author": "Raphaël GOETTER, Alsacreations",
|
||||
"contributors": [
|
||||
"Raphaël GOETTER, Alsacreations"
|
||||
],
|
||||
"description": "KNACSS is a minimalist, responsive and extensible style sheet to kick-start your HTML / CSS projects. It relies on common best practices and experience on the topic.",
|
||||
"main": "https://github.com/alsacreations/KNACSS/tree/master/css",
|
||||
"keywords": [
|
||||
"css",
|
||||
"framework",
|
||||
"reset",
|
||||
"responsive",
|
||||
"sass",
|
||||
"rwd",
|
||||
"boilerplate",
|
||||
"workflow"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/alsacreations/KNACSS"
|
||||
},
|
||||
"license": "WTFPL",
|
||||
"dependencies": {},
|
||||
"name": "demo",
|
||||
"version": "0.0.0",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^9.7.4",
|
||||
"cssnano": "latest",
|
||||
"gulp": "^3.x",
|
||||
"gulp-postcss": "latest",
|
||||
"gulp-rename": "^2.0.0",
|
||||
"gulp-sass": "latest",
|
||||
"postcss-flexbugs-fixes": "^4.2.0",
|
||||
"postcss-gap-properties": "latest",
|
||||
"postcss-unprefix": "latest"
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-postcss": "^8.0.0",
|
||||
"gulp-sass": "^4.1.0"
|
||||
},
|
||||
"engines": {}
|
||||
"dependencies": {
|
||||
"autoprefixer": "^9.7.1",
|
||||
"postcss-combine-media-query": "^1.0.1",
|
||||
"cssnano": "^4.1.10",
|
||||
"gulp-rename": "^2.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
32
sass/abstracts/_mixins-sass.scss
Normal file
32
sass/abstracts/_mixins-sass.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
// Respond-to mixin
|
||||
// ex. @include respond-to("medium-up") {...}
|
||||
|
||||
$bp-aliases: (
|
||||
'small' : (max-width: #{$small - 1}),
|
||||
'medium' : (max-width: #{$medium - 1}),
|
||||
'large' : (max-width: #{$large - 1}),
|
||||
'extra-large' : (max-width: #{$extra-large - 1}),
|
||||
'small-up' : (min-width: #{$small}),
|
||||
'medium-up' : (min-width: #{$medium}),
|
||||
'large-up' : (min-width: #{$large}),
|
||||
'extra-large-up' : (min-width: #{$extra-large})
|
||||
);
|
||||
|
||||
// Source : https://www.sitepoint.com/managing-responsive-breakpoints-sass/
|
||||
@mixin respond-to($name) {
|
||||
|
||||
// If the key exists in the map
|
||||
@if map-has-key($bp-aliases, $name) {
|
||||
|
||||
// Prints a media query based on the value
|
||||
@media #{inspect(map-get($bp-aliases, $name))} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// If the key doesn't exist in the map
|
||||
@else {
|
||||
@warn "Unfortunately, no value could be retrieved from `#{$name}`. "
|
||||
+"Please make sure it is defined in `$bp-aliases` map.";
|
||||
}
|
||||
}
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
// 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);}
|
||||
@mixin font-size($elem) {
|
||||
$q: map-get($font-sizes, $elem);
|
||||
$mob: map-get($q, "mobile");
|
||||
$desk: map-get($q, "desktop");
|
||||
font-size: $mob;
|
||||
@include respond-to("small-up") {
|
||||
font-size: $desk;
|
||||
}
|
||||
}
|
||||
|
||||
// Grid Mixin
|
||||
// arguments are : columns number, gutter, min-breakpoint
|
||||
// ex. .ingrid { @include grid(4, 1rem, 640px); }
|
||||
@mixin grid($number:1, $gutter:0, $breakpoint:0) {
|
||||
@supports (display: grid) {
|
||||
@media (min-width: $breakpoint) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat($number, 1fr);
|
||||
grid-gap: $gutter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Additionnal "utility" breakpoints aliases
|
||||
// ex. @include respond-to("medium-up") {...}
|
||||
$bp-aliases: (
|
||||
'tiny' : (max-width: #{$tiny - 1}),
|
||||
'small' : (max-width: #{$small - 1}),
|
||||
'medium' : (max-width: #{$medium - 1}),
|
||||
'large' : (max-width: #{$large - 1}),
|
||||
'extra-large' : (max-width: #{$extra-large - 1}),
|
||||
'tiny-up' : (min-width: #{$tiny}),
|
||||
'small-up' : (min-width: #{$small}),
|
||||
'medium-up' : (min-width: #{$medium}),
|
||||
'large-up' : (min-width: #{$large}),
|
||||
'extra-large-up' : (min-width: #{$extra-large}),
|
||||
'retina' : (min-resolution: 2dppx)
|
||||
);
|
||||
|
||||
// Source : https://www.sitepoint.com/managing-responsive-breakpoints-sass/
|
||||
@mixin respond-to($name) {
|
||||
// If the key exists in the map
|
||||
@if map-has-key($bp-aliases, $name) {
|
||||
// Prints a media query based on the value
|
||||
@media #{inspect(map-get($bp-aliases, $name))} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// If the key doesn't exist in the map
|
||||
@else {
|
||||
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
|
||||
+ "Please make sure it is defined in `$breakpoints` map.";
|
||||
}
|
||||
}
|
||||
197
sass/abstracts/_variables-sass.scss
Normal file
197
sass/abstracts/_variables-sass.scss
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
// ----------------
|
||||
// Sass Config and variables
|
||||
// ----------------
|
||||
|
||||
// ----------------
|
||||
// Breakpoints values
|
||||
// ----------------
|
||||
$breakpoints: (
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 1024px,
|
||||
xl: 1330px,
|
||||
) !default;
|
||||
|
||||
$small: map-get($breakpoints, sm) !default;
|
||||
$medium: map-get($breakpoints, md) !default;
|
||||
$large: map-get($breakpoints, lg) !default;
|
||||
$extra-large: map-get($breakpoints, xl) !default;
|
||||
|
||||
// ----------------
|
||||
// Spacers values
|
||||
// ----------------
|
||||
|
||||
$spacers: (
|
||||
"0": 0,
|
||||
"1": 0.5rem,
|
||||
// tiny
|
||||
"2": 0.75rem,
|
||||
// tiny-plus
|
||||
"3": 1rem,
|
||||
// small
|
||||
"4": 1.5rem,
|
||||
// small-plus
|
||||
"5": 2rem,
|
||||
// medium
|
||||
"6": 3rem,
|
||||
// medium-plus
|
||||
"7": 5rem,
|
||||
// large
|
||||
"auto": auto,
|
||||
) !default;
|
||||
|
||||
$spacer-none: map-get($spacers, "0") !default;
|
||||
$spacer-tiny: map-get($spacers, "1") !default;
|
||||
$spacer-tiny-plus: map-get($spacers, "2") !default;
|
||||
$spacer-small: map-get($spacers, "3") !default;
|
||||
$spacer-small-plus: map-get($spacers, "4") !default;
|
||||
$spacer-medium: map-get($spacers, "5") !default;
|
||||
$spacer-medium-plus: map-get($spacers, "6") !default;
|
||||
$spacer-large: map-get($spacers, "7") !default;
|
||||
|
||||
// ----------------
|
||||
// Grid layout values
|
||||
// ----------------
|
||||
|
||||
$grid-columns: 6 !default;
|
||||
|
||||
// ----------------
|
||||
// Fonts values
|
||||
// ----------------
|
||||
|
||||
// Font families
|
||||
$font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
$font-family-headings: sans-serif;
|
||||
$font-family-monospace: consolas, courier, monospace;
|
||||
$line-height-base: 1.5;
|
||||
|
||||
// Font sizes
|
||||
$font-size-html: 62.5%;
|
||||
$font-size-base: 1.6rem;
|
||||
|
||||
// Font weights
|
||||
$weight-light: 200;
|
||||
$weight-book: 300;
|
||||
$weight-regular: 400;
|
||||
$weight-medium: 500;
|
||||
$weight-bold: 700;
|
||||
|
||||
// ----------------
|
||||
// Color values
|
||||
// ----------------
|
||||
|
||||
// Color palette (don't use as variables except $white and $black)
|
||||
$white: #ffffff;
|
||||
$black: #000000;
|
||||
|
||||
$color-gray-1: #f7fafc;
|
||||
$color-gray-2: #abc3c2;
|
||||
$color-gray-3: #454d5d;
|
||||
$color-gray-4: #212529;
|
||||
|
||||
$color-blue-1: #0275d8;
|
||||
$color-blue-2: #04527b;
|
||||
$color-blue-3: #033651;
|
||||
|
||||
// Non agnostic colors (should be used as variables)
|
||||
|
||||
$color-alpha: $color-gray-1; // most used colors
|
||||
$color-beta: $color-gray-3;
|
||||
$color-gamma: $color-gray-4;
|
||||
|
||||
$color-delta: $color-blue-1;
|
||||
$color-epsilon: $color-blue-2;
|
||||
|
||||
$color-gradient-alpha: linear-gradient(
|
||||
to left bottom,
|
||||
$color-alpha,
|
||||
$color-beta
|
||||
);
|
||||
|
||||
$color-alternate-1: #5cb85c; // less used colors
|
||||
$color-alternate-1b: #4d9c4d;
|
||||
$color-alternate-2: #5bc0de;
|
||||
$color-alternate-2b: #4fa8c4;
|
||||
$color-alternate-3: #f0ad4e;
|
||||
$color-alternate-3b: #d19644;
|
||||
$color-alternate-4: #d9534f;
|
||||
$color-alternate-4b: #be4945;
|
||||
|
||||
// Links
|
||||
$link-decoration: underline;
|
||||
$link-decoration-hover: underline;
|
||||
|
||||
// Border radius
|
||||
$radius-none: 0;
|
||||
$radius-small: 0.5rem;
|
||||
$radius-medium: 1rem;
|
||||
$radius-large: 2rem;
|
||||
$radius-circle: 50%;
|
||||
|
||||
// ----------------
|
||||
// Utils properties list (note that display: grid is in Grillade)
|
||||
// ----------------
|
||||
$utils: (
|
||||
(hidden, display, none),
|
||||
(block, display, block),
|
||||
(inline, display, inline),
|
||||
(inline-block, display, inline-block),
|
||||
(flex, display, flex),
|
||||
(flex-row, flex-direction, row),
|
||||
(flex-col, flex-direction, column),
|
||||
(flex-wrap, flex-wrap, wrap),
|
||||
(flex-no-wrap, flex-wrap, nowrap),
|
||||
(flex-shrink, flex-shrink, 1),
|
||||
(flex-no-shrink, flex-shrink, 0),
|
||||
(flex-grow, flex-grow, 1),
|
||||
(flex-no-grow, flex-grow, 0),
|
||||
(float-left, float, left),
|
||||
(float-right, float, right),
|
||||
(float-none, float, none),
|
||||
(text-bold, font-weight, bold),
|
||||
(text-italic, font-style, italic),
|
||||
(text-uppercase, text-transform, uppercase),
|
||||
(text-lowercase, text-transform, lowercase),
|
||||
(text-smaller, font-size, smaller),
|
||||
(text-bigger, font-size, bigger),
|
||||
(text-left, text-align, left),
|
||||
(text-center, text-align, center),
|
||||
(text-right, text-align, right),
|
||||
(text-justify, text-align, justify),
|
||||
(text-wrap, overflow-wrap, break-word),
|
||||
(justify-start, justify-content, flex-start),
|
||||
(justify-end, justify-content, flex-end),
|
||||
(justify-center, justify-content, center),
|
||||
(justify-between, justify-content, space-between),
|
||||
(justify-around, justify-content, space-around),
|
||||
(justify-evenly, justify-content, space-evenly),
|
||||
(justify-items-start, justify-items, start),
|
||||
(justify-items-end, justify-items, end),
|
||||
(justify-items-center, justify-items, center),
|
||||
(align-start, align-content, start),
|
||||
(align-end, align-content, end),
|
||||
(align-center, align-content, center),
|
||||
(align-between, align-content, space-between),
|
||||
(align-around, align-content, space-around),
|
||||
(align-evenly, align-content, space-evenly),
|
||||
(align-items-start, align-items, flex-start),
|
||||
(align-items-end, align-items, flex-end),
|
||||
(align-items-center, align-items, center),
|
||||
(place-center, place-content, center),
|
||||
(justify-self-auto, justify-self, auto),
|
||||
(justify-self-start, justify-self, start),
|
||||
(justify-self-end, justify-self, end),
|
||||
(justify-self-center, justify-self, center),
|
||||
(justify-self-stretch, justify-self, stretch),
|
||||
(align-self-auto, align-self, auto),
|
||||
(align-self-start, align-self, flex-start),
|
||||
(align-self-end, align-self, flex-end),
|
||||
(align-self-center, align-self, center),
|
||||
(align-self-stretch, align-self, stretch),
|
||||
(align-top, vertical-align, top),
|
||||
(align-bottom, vertical-align, bottom),
|
||||
(align-middle, vertical-align, middle),
|
||||
(item-first, order, -100),
|
||||
(item-last, order, 100)
|
||||
) !default;
|
||||
|
|
@ -1,233 +0,0 @@
|
|||
// Config file and project variables
|
||||
|
||||
// ----------------
|
||||
// Breakpoints zone
|
||||
// ----------------
|
||||
|
||||
// Warning: you should use your own values, regardless of the devices
|
||||
// Best practice is Mobile First: (min-width: $breakpoint)
|
||||
$tiny : 480px !default; // or 'em' if you prefer, of course
|
||||
$small : 576px !default;
|
||||
$medium : 768px !default;
|
||||
$large : 992px !default;
|
||||
$extra-large : 1200px !default;
|
||||
|
||||
// ----------
|
||||
// Fonts zone
|
||||
// ----------
|
||||
|
||||
// Font families
|
||||
$font-family-base : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default; // system font stack
|
||||
$font-family-headings : sans-serif !default; // font for h1, h2.. h6
|
||||
$font-family-monospace : consolas, courier, monospace !default; // font for code and samples
|
||||
|
||||
// Font sizes (1.6rem value is "16px" equivalent)
|
||||
$font-size-base : 1.6rem !default;
|
||||
|
||||
$font-sizes: (
|
||||
base: (
|
||||
mobile : 1.4rem,
|
||||
desktop : $font-size-base
|
||||
),
|
||||
h1: (
|
||||
mobile : 2.8rem,
|
||||
desktop : 3.2rem
|
||||
),
|
||||
h2: (
|
||||
mobile : 2.4rem,
|
||||
desktop : 2.8rem
|
||||
),
|
||||
h3: (
|
||||
mobile : 2.0rem,
|
||||
desktop : 2.4rem
|
||||
),
|
||||
h4: (
|
||||
mobile : 1.8rem,
|
||||
desktop : 2.0rem
|
||||
),
|
||||
h5: (
|
||||
mobile : 1.6rem,
|
||||
desktop : 1.8rem
|
||||
),
|
||||
h6: (
|
||||
mobile : 1.4rem,
|
||||
desktop : 1.6rem
|
||||
)
|
||||
) !default;
|
||||
|
||||
// Line heights
|
||||
$line-height-s : 1.3 !default;
|
||||
$line-height-base : 1.5 !default;
|
||||
$line-height-l : 1.7 !default;
|
||||
|
||||
// Default margin-bottom
|
||||
$margin-bottom-base : 1rem !default;
|
||||
$headings-margin-bottom : $margin-bottom-base /2 !default;
|
||||
$paragraph-margin-bottom: $margin-bottom-base !default;
|
||||
|
||||
// Font weights
|
||||
$weight-light : 200 !default;
|
||||
$weight-book : 300 !default;
|
||||
$weight-regular : 400 !default;
|
||||
$weight-medium : 500 !default;
|
||||
$weight-bold : 700 !default;
|
||||
|
||||
// Activate hyphenation on small screens
|
||||
$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
|
||||
// ------------
|
||||
|
||||
// Number of grid-columns
|
||||
$cols: 12 !default;
|
||||
|
||||
// Gutter
|
||||
$gutter: null;
|
||||
|
||||
// Grid gutters (for .has-gutter-* classes)
|
||||
$grid-gutters: (
|
||||
'': 1rem,
|
||||
'-l': 2rem,
|
||||
'-xl': 4rem
|
||||
) !default;
|
||||
|
||||
// Spacings
|
||||
$spacer-tiny : .5rem !default;
|
||||
$spacer-tiny-plus : .7rem !default;
|
||||
$spacer-small : 1rem !default;
|
||||
$spacer-small-plus : 1.5rem !default;
|
||||
$spacer-medium : 2rem !default;
|
||||
$spacer-medium-plus : 3rem !default;
|
||||
$spacer-large : 4rem !default;
|
||||
$spacer-large-plus : 6rem !default;
|
||||
$spacer-extra-large : 8rem !default;
|
||||
$spacer-extra-large-plus : 12rem !default;
|
||||
$spacer-ultra-large : 16rem !default;
|
||||
$spacer-ultra-large-plus : 20rem !default;
|
||||
|
||||
// z-indexes
|
||||
$zindex-navigation : 1000 !default;
|
||||
$zindex-dropdown : 2000 !default;
|
||||
$zindex-popover : 3000 !default;
|
||||
$zindex-tooltip : 4000 !default;
|
||||
$zindex-modal : 5000 !default;
|
||||
$zindex-notification : 6000 !default;
|
||||
$zindex-debug : 7000 !default;
|
||||
|
||||
// ----------
|
||||
// Color zone
|
||||
// ----------
|
||||
|
||||
// Color names
|
||||
$white : #fff !default;
|
||||
$gray-100 : #f8f9fa !default;
|
||||
$gray-200 : #e7e9ed !default;
|
||||
$gray-300 : #dee2e6 !default;
|
||||
$gray-400 : #ced4da !default;
|
||||
$gray-500 : #acb3c2 !default;
|
||||
$gray-600 : #727e96 !default;
|
||||
$gray-700 : #454d5d !default;
|
||||
$gray-800 : #333 !default;
|
||||
$gray-900 : #212529 !default;
|
||||
$black : #000 !default;
|
||||
|
||||
$blue-300 : #5BC0DE !default;
|
||||
$blue-500 : #0275D8 !default;
|
||||
$green-500 : #5CB85C !default;
|
||||
$orange-500 : #F0AD4E !default;
|
||||
$red-500 : #D9534F !default;
|
||||
|
||||
// Semantic colors
|
||||
$color-brand : $green-500 !default;
|
||||
$color-primary : $blue-500 !default;
|
||||
$color-success : $green-500 !default;
|
||||
$color-info : $blue-300 !default;
|
||||
$color-warning : $orange-500 !default;
|
||||
$color-danger : $red-500 !default;
|
||||
$color-inverse : $gray-800 !default;
|
||||
$color-ghost : transparent !default;
|
||||
$color-muted : $gray-200 !default;
|
||||
|
||||
$color-base : $gray-900 !default;
|
||||
$background-base : $white !default;
|
||||
|
||||
$forms-color : $gray-800 !default;
|
||||
|
||||
// ---------------
|
||||
// Components zone
|
||||
// ---------------
|
||||
|
||||
// Component: links
|
||||
$link-color : $gray-800 !default;
|
||||
$link-color-hover : darken($link-color, 15%) !default;
|
||||
$link-decoration : underline !default;
|
||||
$link-decoration-hover : underline !default;
|
||||
|
||||
// Global border-radius
|
||||
$border-radius: 0 !default;
|
||||
|
||||
// Component: quotes
|
||||
$quote-color : $gray-200 !default;
|
||||
|
||||
// Component: arrows
|
||||
$arrow-color : $black !default;
|
||||
|
||||
// Components: checkboxes, radios, switches
|
||||
$checkbox-color: $white !default;
|
||||
$checkbox-background: $gray-800 !default;
|
||||
$checkbox-size: 2rem !default;
|
||||
$checkbox-border-radius: 4px !default;
|
||||
$radio-color: $gray-800 !default;
|
||||
$radio-background: $white !default;
|
||||
$switch-color: $white !default;
|
||||
$switch-background: $gray-800 !default;
|
||||
$switch-size: 2rem !default;
|
||||
$switch-border-radius: 3em !default;
|
||||
|
||||
// Component: tables
|
||||
$table-border : $gray-500 !default;
|
||||
$table-caption-color : $gray-800 !default;
|
||||
$table-background : transparent !default;
|
||||
$table-head-color : $color-base !default;
|
||||
$table-head-background : transparent !default;
|
||||
$table-footer-color : $color-base !default;
|
||||
$table-footer-background : transparent !default;
|
||||
|
||||
// Components: buttons, badges, alerts color variants list
|
||||
// Convention is: name - background-color - color - border
|
||||
$variants-list: (
|
||||
(primary, $color-primary, $white, none),
|
||||
(success, $color-success, $white, none),
|
||||
(info, $color-info, $black, none),
|
||||
(warning, $color-warning, $black, none),
|
||||
(danger, $color-danger, $white, none),
|
||||
(inverse, $color-inverse, $white, none),
|
||||
(ghost, $color-ghost, $white, 0 0 0 1px $white inset)
|
||||
) !default;
|
||||
|
||||
// Component: tabs
|
||||
$tabs-border : $gray-200 !default;
|
||||
$tabs-active-border : $gray-800 !default;
|
||||
$tabs-color : $color-base !default;
|
||||
$tabs-active-color : $gray-800 !default;
|
||||
$tabs-background : transparent !default;
|
||||
$tabs-active-background : transparent !default;
|
||||
$tabs-border-radius : 0 !default;
|
||||
|
||||
// Component: nav burger button
|
||||
$burger-color : $gray-800 !default;
|
||||
$burger-background : transparent !default;
|
||||
$burger-hover-background : transparent !default;
|
||||
$burger-size : 2.6rem !default;
|
||||
$burger-weight : 5px !default; // size of stripes
|
||||
$burger-padding : 0 !default;
|
||||
|
|
@ -1,65 +1,41 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Global Micro Layout */
|
||||
/* ---------------------------- */
|
||||
/* ==Layout classes */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* Flexbox layout is KNACSS choice
|
||||
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
||||
*/
|
||||
/* Global container */
|
||||
.layout-maxed {
|
||||
display: grid;
|
||||
|
||||
.flex-container,
|
||||
.d-flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@each $key,
|
||||
$value in $breakpoints {
|
||||
@media (min-width: #{$value}) {
|
||||
grid-template-columns:
|
||||
minmax($spacer-small, 1fr)
|
||||
minmax(auto, $value)
|
||||
minmax($spacer-small, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex-container--row,
|
||||
.flex-row {
|
||||
@extend .flex-container;
|
||||
flex-direction: row;
|
||||
/* Center all children */
|
||||
.layout-maxed > * {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.flex-container--column,
|
||||
.flex-column {
|
||||
@extend .flex-container;
|
||||
flex-direction: column;
|
||||
/* Hero box */
|
||||
.layout-hero {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: inherit;
|
||||
}
|
||||
|
||||
.flex-container--row-reverse,
|
||||
.flex-row-reverse {
|
||||
@extend .flex-container;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
.layout-hero > * {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.flex-container--column-reverse,
|
||||
.flex-column-reverse {
|
||||
@extend .flex-container;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.flex-item-fluid,
|
||||
.item-fluid {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
.flex-item-first,
|
||||
.item-first {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.flex-item-medium,
|
||||
.item-medium {
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-item-last,
|
||||
.item-last {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.flex-item-center,
|
||||
.item-center,
|
||||
.mr-auto {
|
||||
margin: auto;
|
||||
/* Hero image */
|
||||
.layout-hero-img {
|
||||
grid-column: 1 / -1;
|
||||
justify-self: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
65
sass/base/_reset-accessibility.scss
Normal file
65
sass/base/_reset-accessibility.scss
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
/*
|
||||
* Hidden but not for an assistive technology like a screen reader, Yahoo! method
|
||||
*/
|
||||
|
||||
.visually-hidden,
|
||||
.sr-only {
|
||||
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;
|
||||
}
|
||||
|
||||
/*
|
||||
* Disable animations styles when reduced motion is enabled
|
||||
*/
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Change the cursor on busy elements in all browsers.
|
||||
*/
|
||||
|
||||
[aria-busy="true"] {
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
/*
|
||||
* Change the cursor on control elements in all browsers.
|
||||
*/
|
||||
|
||||
[aria-controls] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*
|
||||
* Change the cursor on disabled, not-editable, or otherwise
|
||||
* inoperable elements in all browsers.
|
||||
*/
|
||||
|
||||
[aria-disabled="true"],
|
||||
[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/*
|
||||
* Change the display on visually hidden accessible elements
|
||||
* in all browsers.
|
||||
*/
|
||||
|
||||
[aria-hidden="false"][hidden] {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
[aria-hidden="false"][hidden]:not(:focus) {
|
||||
clip: rect(0, 0, 0, 0);
|
||||
position: absolute;
|
||||
}
|
||||
250
sass/base/_reset-base.scss
Normal file
250
sass/base/_reset-base.scss
Normal file
|
|
@ -0,0 +1,250 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Reset (base) */
|
||||
/* ----------------------------- */
|
||||
|
||||
/*
|
||||
* 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. Breaks words to prevent overflow in all browsers
|
||||
*/
|
||||
|
||||
html {
|
||||
font-size: $font-size-html;
|
||||
-webkit-tap-highlight-color: transparent; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
overflow-wrap: break-word; /* 3 */
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: $font-family-base;
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
background-color: $white;
|
||||
color: $color-gamma;
|
||||
}
|
||||
|
||||
/*
|
||||
* Headings
|
||||
*/
|
||||
|
||||
h1,
|
||||
.h1-like,
|
||||
h2,
|
||||
.h2-like,
|
||||
h3,
|
||||
.h3-like,
|
||||
h4,
|
||||
.h4-like,
|
||||
h5,
|
||||
.h5-like,
|
||||
h6,
|
||||
.h6-like {
|
||||
color: $color-gamma;
|
||||
}
|
||||
|
||||
/*
|
||||
* Links
|
||||
*/
|
||||
|
||||
a {
|
||||
color: $color-beta;
|
||||
text-decoration: $link-decoration;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:hover,
|
||||
a:active {
|
||||
color: $color-gamma;
|
||||
text-decoration: $link-decoration-hover;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Vertical rythm
|
||||
*/
|
||||
|
||||
h1,
|
||||
.h1-like,
|
||||
h2,
|
||||
.h2-like {
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacer-medium;
|
||||
}
|
||||
|
||||
p,
|
||||
address,
|
||||
ol,
|
||||
ul,
|
||||
dl,
|
||||
blockquote,
|
||||
pre,
|
||||
h3,
|
||||
.h3-like,
|
||||
h4,
|
||||
.h4-like,
|
||||
h5,
|
||||
.h5-like,
|
||||
h6,
|
||||
.h6-like,
|
||||
dt,
|
||||
dd {
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacer-small;
|
||||
}
|
||||
|
||||
/*
|
||||
* Nested elements
|
||||
*/
|
||||
|
||||
ol ol,
|
||||
ol ul,
|
||||
ul ol,
|
||||
ul ul,
|
||||
li ul,
|
||||
li ol,
|
||||
nav ul,
|
||||
nav ol,
|
||||
li p,
|
||||
li .p-like {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Lists
|
||||
*/
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: $spacer-medium;
|
||||
}
|
||||
|
||||
nav ul,
|
||||
nav ol {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Embed content
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
img,
|
||||
table,
|
||||
td,
|
||||
blockquote,
|
||||
pre,
|
||||
code,
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
video,
|
||||
svg,
|
||||
iframe {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
iframe,
|
||||
img,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the border on iframes in all browsers
|
||||
*/
|
||||
|
||||
iframe {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Fill color matching to text color
|
||||
*/
|
||||
|
||||
svg:not([fill]) {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
/*
|
||||
* Hide the overflow in IE
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
* Tables
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
/*
|
||||
* Rulers
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
border: 0;
|
||||
border-top: 1px solid;
|
||||
margin: $spacer-medium 0;
|
||||
clear: both;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
* table styles
|
||||
*/
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
vertical-align: top;
|
||||
margin-bottom: $spacer-medium;
|
||||
}
|
||||
224
sass/base/_reset-forms.scss
Normal file
224
sass/base/_reset-forms.scss
Normal file
|
|
@ -0,0 +1,224 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Reset (forms) */
|
||||
/* ----------------------------- */
|
||||
|
||||
/*
|
||||
* Remove the tapping delay on clickable elements in all browsers .
|
||||
*/
|
||||
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea,
|
||||
[tabindex] {
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Change the inconsistent appearance in all browsers.
|
||||
* 2. Add typography inheritance in all browsers.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin: 0;
|
||||
background-color: transparent; /* 1 */
|
||||
color: inherit; /* 1 */
|
||||
font-family: inherit; /* 2 */
|
||||
font-size: inherit; /* 2 */
|
||||
line-height: inherit; /* 2 */
|
||||
letter-spacing: inherit; /* 2 */
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/*
|
||||
* Basic User Interface reset
|
||||
*/
|
||||
|
||||
button,
|
||||
input:not([type="radio"]):not([type="checkbox"]),
|
||||
select,
|
||||
textarea {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
pre {
|
||||
tab-size: 2;
|
||||
white-space: pre-wrap;
|
||||
line-height: normal;
|
||||
overflow: auto;
|
||||
-ms-overflow-style: scrollbar;
|
||||
}
|
||||
|
||||
/*
|
||||
* Show overflow in IE/Edge
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the inheritance of text transform in Firefox
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
form,
|
||||
fieldset {
|
||||
border: none;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: $spacer-medium;
|
||||
}
|
||||
|
||||
legend {
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
padding: 0 $spacer-tiny;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
vertical-align: top;
|
||||
resize: vertical;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
progress {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* Form oddities */
|
||||
/* ----------------------------- */
|
||||
|
||||
/*
|
||||
* 1. Correct the odd appearance in Chrome, Edge, and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Correct the cursor style of increment and decrement buttons in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Correct the text style of placeholders in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: inherit;
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the inner padding in Chrome, Edge, and Safari on macOS.
|
||||
*/
|
||||
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Correct the inability to style upload buttons in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the inner border and padding of focus outlines in Firefox.
|
||||
*/
|
||||
|
||||
::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Restore the focus outline styles unset by the previous rule in Firefox.
|
||||
*/
|
||||
|
||||
:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the additional :invalid styles in Firefox.
|
||||
*/
|
||||
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -89,10 +89,8 @@
|
|||
}
|
||||
*/
|
||||
|
||||
a[href^="javascript:"],
|
||||
a[href^="#"] {
|
||||
&::after {
|
||||
content: "";
|
||||
}
|
||||
a[href^="javascript:"]::after,
|
||||
a[href^="#"]::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
|
@ -1,518 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,284 +0,0 @@
|
|||
/* -------------------------- */
|
||||
/* ==Responsive helpers */
|
||||
/* -------------------------- */
|
||||
|
||||
/* large screens */
|
||||
/* ------------- */
|
||||
|
||||
@media (min-width: $large) {
|
||||
|
||||
/* layouts for large screens */
|
||||
.large-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.large-visible {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.large-no-float {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.large-inbl {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* widths for large screens */
|
||||
.large-w25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
.large-w33 {
|
||||
width: 33.333333% !important;
|
||||
}
|
||||
|
||||
.large-w50 {
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
.large-w66 {
|
||||
width: 66.666666% !important;
|
||||
}
|
||||
|
||||
.large-w75 {
|
||||
width: 75% !important;
|
||||
}
|
||||
|
||||
.large-w100,
|
||||
.large-wauto {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
clear: none !important;
|
||||
width: auto !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* margins for large screens */
|
||||
.large-man,
|
||||
.large-ma0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* medium screens */
|
||||
/* -------------- */
|
||||
|
||||
@media (min-width: $medium) and (max-width: ($large - 1)) {
|
||||
|
||||
/* layouts for medium screens */
|
||||
.medium-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.medium-visible {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.medium-no-float {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.medium-inbl {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* widths for medium screens */
|
||||
.medium-w25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
.medium-w33 {
|
||||
width: 33.333333% !important;
|
||||
}
|
||||
|
||||
.medium-w50 {
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
.medium-w66 {
|
||||
width: 66.666666% !important;
|
||||
}
|
||||
|
||||
.medium-w75 {
|
||||
width: 75% !important;
|
||||
}
|
||||
|
||||
.medium-w100,
|
||||
.medium-wauto {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
clear: none !important;
|
||||
width: auto !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* margins for medium screens */
|
||||
.medium-man,
|
||||
.medium-ma0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* small screens */
|
||||
/* ------------- */
|
||||
|
||||
@media (min-width: $small) and (max-width: ($medium - 1)) {
|
||||
|
||||
/* layouts for small screens */
|
||||
.small-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.small-visible {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.small-no-float {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.small-inbl {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* widths for small screens */
|
||||
.small-w25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
.small-w33 {
|
||||
width: 33.333333% !important;
|
||||
}
|
||||
|
||||
.small-w50 {
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
.small-w66 {
|
||||
width: 66.666666% !important;
|
||||
}
|
||||
|
||||
.small-w75 {
|
||||
width: 75% !important;
|
||||
}
|
||||
|
||||
.small-w100,
|
||||
.small-wauto {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
clear: none !important;
|
||||
width: auto !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* margins for small screens */
|
||||
.small-man,
|
||||
.small-ma0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.small-pan,
|
||||
.small-pa0 {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* tiny screens */
|
||||
/* ------------ */
|
||||
|
||||
@media (max-width: $small - 1) {
|
||||
|
||||
/* quick small resolution reset */
|
||||
.mod,
|
||||
.col,
|
||||
fieldset {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
clear: none !important;
|
||||
width: auto !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* layouts for tiny screens */
|
||||
.tiny-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.tiny-visible {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.tiny-no-float {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.tiny-inbl {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* widths for tiny screens */
|
||||
.tiny-w25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
.tiny-w33 {
|
||||
width: 33.333333% !important;
|
||||
}
|
||||
|
||||
.tiny-w50 {
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
.tiny-w66 {
|
||||
width: 66.666666% !important;
|
||||
}
|
||||
|
||||
.tiny-w75 {
|
||||
width: 75% !important;
|
||||
}
|
||||
|
||||
.tiny-w100,
|
||||
.tiny-wauto {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
clear: none !important;
|
||||
width: auto !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* margins for tiny screens */
|
||||
.tiny-man,
|
||||
.tiny-ma0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.tiny-pan,
|
||||
.tiny-pa0 {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,440 +0,0 @@
|
|||
/* ---------------------------------- */
|
||||
/* ==Helpers */
|
||||
/* ---------------------------------- */
|
||||
|
||||
/* Typo Helpers */
|
||||
/* ------------- */
|
||||
|
||||
.u-bold {
|
||||
font-weight: $weight-bold;
|
||||
}
|
||||
|
||||
.u-italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.u-normal {
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.u-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.u-lowercase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.u-smaller {
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
.u-small {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.u-big {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.u-bigger {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.u-biggest {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.u-txt-wrap {
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.u-txt-ellipsis {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* text and contents alignment */
|
||||
|
||||
.txtleft,
|
||||
.u-txt-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.txtright,
|
||||
.u-txt-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.txtcenter,
|
||||
.u-txt-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* blocks that need to be placed under floats */
|
||||
|
||||
.clear,
|
||||
.u-clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* blocks that must contain floats */
|
||||
|
||||
.clearfix,
|
||||
.u-clearfix {
|
||||
&::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
}
|
||||
|
||||
/* simple blocks alignment */
|
||||
|
||||
.left,
|
||||
.u-left {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.right,
|
||||
.u-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.center,
|
||||
.u-center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* Global Micro Layout */
|
||||
/* ------------------- */
|
||||
|
||||
/* "BFC" Block Formating Context */
|
||||
|
||||
.bfc,
|
||||
.u-bfc {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* floating elements */
|
||||
|
||||
.fl,
|
||||
.u-fl {
|
||||
float: left;
|
||||
}
|
||||
|
||||
img.fl,
|
||||
img.u-fl {
|
||||
margin-right: $spacer-small;
|
||||
}
|
||||
|
||||
.fr,
|
||||
.u-fr {
|
||||
float: right;
|
||||
}
|
||||
|
||||
img.fr,
|
||||
img.u-fr {
|
||||
margin-left: $spacer-small;
|
||||
}
|
||||
|
||||
img.fl,
|
||||
img.fr,
|
||||
img.u-fl,
|
||||
img.u-fr {
|
||||
margin-bottom: $spacer-tiny;
|
||||
}
|
||||
|
||||
/* inline-block */
|
||||
|
||||
.inbl,
|
||||
.u-inbl {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* State Helpers */
|
||||
/* ------------- */
|
||||
|
||||
/* invisible for all */
|
||||
.is-hidden,
|
||||
.js-hidden,
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* hidden but not for an assistive technology like a screen reader, Yahoo! method */
|
||||
// mixin in `abstracts/_mixins.scss`
|
||||
.visually-hidden {
|
||||
@include visually-hidden;
|
||||
}
|
||||
@include respond-to("small") {
|
||||
.small-visually-hidden {
|
||||
@include visually-hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.is-disabled,
|
||||
.js-disabled,
|
||||
[disabled],
|
||||
.is-disabled ~ label,
|
||||
[disabled] ~ label {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed !important;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
ul {
|
||||
&.is-unstyled,
|
||||
&.unstyled {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Width Helpers */
|
||||
/* ------------- */
|
||||
|
||||
/* blocks widths (percentage and pixels) */
|
||||
$i: 100;
|
||||
|
||||
@while $i > 0 {
|
||||
.w#{$i} {
|
||||
width: $i * 1%;
|
||||
}
|
||||
$i: $i - 5;
|
||||
}
|
||||
.w66 {
|
||||
width: calc(100% / 3 * 2);
|
||||
}
|
||||
.w33 {
|
||||
width: calc(100% / 3);
|
||||
}
|
||||
|
||||
$i: 1000;
|
||||
|
||||
.wauto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.w960p {
|
||||
width: 960px;
|
||||
}
|
||||
|
||||
.mw960p {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.w1140p {
|
||||
width: 1140px;
|
||||
}
|
||||
|
||||
.mw1140p {
|
||||
max-width: 1140px;
|
||||
}
|
||||
|
||||
@while $i > 0 {
|
||||
.w#{$i}p {
|
||||
width: $i * 1px;
|
||||
}
|
||||
$i: $i - 50;
|
||||
}
|
||||
|
||||
/* Spacing Helpers */
|
||||
/* --------------- */
|
||||
|
||||
.man,
|
||||
.ma0 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pan,
|
||||
.pa0 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mas {
|
||||
margin: $spacer-small;
|
||||
}
|
||||
|
||||
.mam {
|
||||
margin: $spacer-medium;
|
||||
}
|
||||
|
||||
.mal {
|
||||
margin: $spacer-large;
|
||||
}
|
||||
|
||||
.pas {
|
||||
padding: $spacer-small;
|
||||
}
|
||||
|
||||
.pam {
|
||||
padding: $spacer-medium;
|
||||
}
|
||||
|
||||
.pal {
|
||||
padding: $spacer-large;
|
||||
}
|
||||
|
||||
.mtn,
|
||||
.mt0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.mts {
|
||||
margin-top: $spacer-small;
|
||||
}
|
||||
|
||||
.mtm {
|
||||
margin-top: $spacer-medium;
|
||||
}
|
||||
|
||||
.mtl {
|
||||
margin-top: $spacer-large;
|
||||
}
|
||||
|
||||
.mrn,
|
||||
.mr0 {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mrs {
|
||||
margin-right: $spacer-small;
|
||||
}
|
||||
|
||||
.mrm {
|
||||
margin-right: $spacer-medium;
|
||||
}
|
||||
|
||||
.mrl {
|
||||
margin-right: $spacer-large;
|
||||
}
|
||||
|
||||
.mbn,
|
||||
.mb0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.mbs {
|
||||
margin-bottom: $spacer-small;
|
||||
}
|
||||
|
||||
.mbm {
|
||||
margin-bottom: $spacer-medium;
|
||||
}
|
||||
|
||||
.mbl {
|
||||
margin-bottom: $spacer-large;
|
||||
}
|
||||
|
||||
.mln,
|
||||
.ml0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.mls {
|
||||
margin-left: $spacer-small;
|
||||
}
|
||||
|
||||
.mlm {
|
||||
margin-left: $spacer-medium;
|
||||
}
|
||||
|
||||
.mll {
|
||||
margin-left: $spacer-large;
|
||||
}
|
||||
|
||||
.mauto {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mtauto {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.mrauto {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mbauto {
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.mlauto {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.ptn,
|
||||
.pt0 {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.pts {
|
||||
padding-top: $spacer-small;
|
||||
}
|
||||
|
||||
.ptm {
|
||||
padding-top: $spacer-medium;
|
||||
}
|
||||
|
||||
.ptl {
|
||||
padding-top: $spacer-large;
|
||||
}
|
||||
|
||||
.prn,
|
||||
.pr0 {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.prs {
|
||||
padding-right: $spacer-small;
|
||||
}
|
||||
|
||||
.prm {
|
||||
padding-right: $spacer-medium;
|
||||
}
|
||||
|
||||
.prl {
|
||||
padding-right: $spacer-large;
|
||||
}
|
||||
|
||||
.pbn,
|
||||
.pb0 {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.pbs {
|
||||
padding-bottom: $spacer-small;
|
||||
}
|
||||
|
||||
.pbm {
|
||||
padding-bottom: $spacer-medium;
|
||||
}
|
||||
|
||||
.pbl {
|
||||
padding-bottom: $spacer-large;
|
||||
}
|
||||
|
||||
.pln,
|
||||
.pl0 {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.pls {
|
||||
padding-left: $spacer-small;
|
||||
}
|
||||
|
||||
.plm {
|
||||
padding-left: $spacer-medium;
|
||||
}
|
||||
|
||||
.pll {
|
||||
padding-left: $spacer-large;
|
||||
}
|
||||
|
|
@ -1,248 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==WordPress reset */
|
||||
/* ----------------------------- */
|
||||
|
||||
/*
|
||||
Author: Geoffrey Crofte, Alsacréations
|
||||
Contributors: Automattic, Geoffrey Crofte
|
||||
Description: Reset styles for WordPress usage of KNACSS
|
||||
*/
|
||||
|
||||
// current menu elements
|
||||
.current_page_item > a {
|
||||
}
|
||||
.current-menu-item > a {
|
||||
}
|
||||
.current_page_ancestor > a {
|
||||
}
|
||||
|
||||
// blocks of content navigation
|
||||
.comment-navigation,
|
||||
.paging-navigation,
|
||||
.post-navigation {
|
||||
overflow: hidden;
|
||||
margin: 0 0 1.5em;
|
||||
|
||||
& .nav-previous {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
& .nav-next {
|
||||
float: right;
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// class in img elements
|
||||
.alignnone {
|
||||
margin: .25em 1.5em 1.5em 0;
|
||||
}
|
||||
|
||||
.aligncenter {
|
||||
clear: both;
|
||||
display: block;
|
||||
margin: 1.5em auto;
|
||||
}
|
||||
|
||||
.alignleft {
|
||||
float: left;
|
||||
margin: 0 1.5em .25em 0;
|
||||
}
|
||||
|
||||
.alignright {
|
||||
float: right;
|
||||
margin: 0 0 .25em 1.5em;
|
||||
}
|
||||
|
||||
.entry-content,
|
||||
.comment-content {
|
||||
clear: both;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
|
||||
.widget + .widget {
|
||||
margin: 1.5em 0 0;
|
||||
}
|
||||
|
||||
// usage example:
|
||||
.widget select {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* === 5.1 Posts - post_class === */
|
||||
|
||||
// featured content
|
||||
.sticky {
|
||||
}
|
||||
|
||||
// attachment post
|
||||
.attachment {
|
||||
}
|
||||
|
||||
// format of post
|
||||
.format- {
|
||||
&aside {
|
||||
}
|
||||
&gallery {
|
||||
}
|
||||
&link {
|
||||
}
|
||||
&image {
|
||||
}
|
||||
"e {
|
||||
}
|
||||
&status {
|
||||
}
|
||||
&video {
|
||||
}
|
||||
&chat {
|
||||
}
|
||||
}
|
||||
|
||||
// class for a tag
|
||||
.tag- {
|
||||
&name-of-tag {
|
||||
}
|
||||
}
|
||||
|
||||
// class for category
|
||||
.category- {
|
||||
&name-of-category {
|
||||
}
|
||||
}
|
||||
|
||||
/* === 5.2 Pages - body_class === */
|
||||
|
||||
// front page
|
||||
.home {
|
||||
// if display posts
|
||||
&.blog {
|
||||
}
|
||||
|
||||
// if static page
|
||||
&.page {
|
||||
}
|
||||
}
|
||||
|
||||
// page displays posts
|
||||
.blog {
|
||||
// if is frontpage
|
||||
&.home {
|
||||
}
|
||||
|
||||
// if static page
|
||||
&.page {
|
||||
}
|
||||
}
|
||||
|
||||
// simple page
|
||||
.page {
|
||||
}
|
||||
|
||||
// page of single post
|
||||
.single {
|
||||
}
|
||||
|
||||
// page of archives
|
||||
.archive {
|
||||
}
|
||||
|
||||
// page of search
|
||||
.search {
|
||||
// if has results
|
||||
.search-results {
|
||||
}
|
||||
|
||||
// if has no results
|
||||
.search-no-results {
|
||||
}
|
||||
}
|
||||
|
||||
// page 404
|
||||
.error404 {
|
||||
}
|
||||
|
||||
// user logged in
|
||||
.logged-in {
|
||||
}
|
||||
|
||||
// text direction if right-to-left
|
||||
// prefer rtl.css: http://codex.wordpress.org/Right-to-Left_Language_Support
|
||||
.rtl {
|
||||
}
|
||||
|
||||
/* === 5.3 Posts and Pages - Contents === */
|
||||
|
||||
.hentry {
|
||||
margin: 0 0 1.5em;
|
||||
}
|
||||
|
||||
.page-content,
|
||||
.entry-content,
|
||||
.entry-summary {
|
||||
margin: 1.5em 0 0;
|
||||
}
|
||||
|
||||
.page-links {
|
||||
clear: both;
|
||||
margin: 0 0 1.5em;
|
||||
}
|
||||
|
||||
.comment-content a {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.bypostauthor {
|
||||
// some make-the-logo-bigger styles
|
||||
}
|
||||
|
||||
img.wp-smiley {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.wp-caption {
|
||||
max-width: 100%;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.wp-caption img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.wp-caption-text {
|
||||
margin: 1em 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
|
||||
@for $i from 2 through 9 {
|
||||
.gallery-columns-#{$i} & {
|
||||
$w: floor(10000 / $i) / 100;
|
||||
max-width: unquote($w + '%');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-caption {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1,146 +0,0 @@
|
|||
/* ---------------------------------- */
|
||||
/* ==Grillade v6 */
|
||||
/* ---------------------------------- */
|
||||
/* IMPORTANT : this is the KNACSS v6 old Grid System based on Flexbox */
|
||||
/* You only need it for projects on older browsers (IE11-) */
|
||||
|
||||
// Responsive breakpoints variables
|
||||
|
||||
// Warning : you should use your own values, regardless of the devices
|
||||
// Best practice : (max-width: ($BP - 1)) and (min-width: $BP)
|
||||
|
||||
$tiny: 480px !default; // or 'em' if you prefer, of course
|
||||
$small: 576px !default;
|
||||
$medium: 768px !default;
|
||||
$large: 992px !default;
|
||||
$extra-large: 1200px !default;
|
||||
$cols: 12 !default;
|
||||
|
||||
// gutter values for grid layouts. Unit can be: %, px, em, rem
|
||||
$grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
|
||||
// IEfixing, see
|
||||
// https://github.com/alsacreations/KNACSS/issues/133;
|
||||
$iefix: 0.01px;
|
||||
@media (min-width: $small) {
|
||||
[class*=" grillade-"],
|
||||
[class^="grillade-"] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > * {
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Multi-line grid constructor
|
||||
// example : .grid-perso { @include grid(12, 3rem); }
|
||||
@mixin grid($grid-number: 1, $own-gutter: 0) {
|
||||
& > * {
|
||||
width: calc(100% / #{$grid-number} - #{$iefix});
|
||||
}
|
||||
@each $affix, $size in $grid-gutters {
|
||||
&.has-gutter#{$affix} {
|
||||
margin-right: -$size / 2;
|
||||
margin-left: -$size / 2;
|
||||
|
||||
& > * {
|
||||
width: calc(100% / #{$grid-number} - #{$size} - #{$iefix});
|
||||
margin-right: $size / 2;
|
||||
margin-left: $size / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@if ($own-gutter != 0) {
|
||||
margin-right: -$own-gutter / 2;
|
||||
margin-left: -$own-gutter / 2;
|
||||
|
||||
& > * {
|
||||
width: calc(100% / #{$grid-number} - #{$own-gutter} - #{$iefix});
|
||||
margin-right: $own-gutter / 2;
|
||||
margin-left: $own-gutter / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mono-line grid constructor (.grid)
|
||||
@media (min-width: $small) {
|
||||
.grillade,
|
||||
.grillade--reverse {
|
||||
display: flex;
|
||||
|
||||
& > * {
|
||||
flex: 1 1 0%;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
@each $affix, $size in $grid-gutters {
|
||||
&.has-gutter#{$affix} > * + * {
|
||||
margin-left: calc(#{$size} - #{$iefix});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Constructing grids : will be compiled in CSS
|
||||
@media (min-width: $small) {
|
||||
@for $i from 2 through $cols {
|
||||
[class*="grillade-#{$i}"] {
|
||||
@include grid(#{$i}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Grid offsets
|
||||
.push {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
.pull {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
// Grid order
|
||||
.item-first {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.item-last {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
[class*="grillade-"][class*="--reverse"] {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
// sizing individual children
|
||||
@media (min-width: $small) {
|
||||
@each $flow, $divider in ("full" "1"), ("one-half" "2"), ("one-third" "3"), ("one-quarter" "4"), ("one-fifth" "5"), ("one-sixth" "6"), ("two-thirds" "3 * 2"), ("three-quarters" "4 * 3"), ("five-sixths" "6 * 5") {
|
||||
.#{$flow} {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / #{$divider} - #{$iefix});
|
||||
}
|
||||
@each $affix, $size in $grid-gutters {
|
||||
.has-gutter#{$affix} > .#{$flow} {
|
||||
width: calc(100% / #{$divider} - #{$size} - #{$iefix});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Responsive Small Breakpoint */
|
||||
// -small-X suffix means "X columns on small-medium screen"
|
||||
// example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until medium) then 4 columns
|
||||
@media (min-width: $small) and (max-width: ($medium - 1)) {
|
||||
@for $i from 1 through 4 {
|
||||
[class*="-small-#{$i}"] {
|
||||
& > * {
|
||||
width: calc(100% / #{$i} - #{$iefix});
|
||||
}
|
||||
@each $affix, $size in $grid-gutters {
|
||||
&.has-gutter#{$affix} > * {
|
||||
width: calc(100% / #{$i} - #{$size} - #{$iefix});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,162 +0,0 @@
|
|||
/* --------------------------------------- */
|
||||
/* ==Grillade : ultra light Grid System */
|
||||
/* --------------------------------------- */
|
||||
// WARNING: THIS IS NOT A COMPLETE GRID FRAMEWORK, just ultra light Grid System
|
||||
// if you need complex Grid :
|
||||
// 1- use vanilla CSS Grid Layout spec (perfect for you)
|
||||
// 2- use Bootstrap (good luck)
|
||||
|
||||
// use these variables only for a standalone Grillade
|
||||
// in KNACSS, you shall modify variables file instead
|
||||
$tiny : 480px !default;
|
||||
$medium : 768px !default;
|
||||
$large : 992px !default;
|
||||
$cols : 12 !default;
|
||||
|
||||
// classic Grid
|
||||
[class*=" grillade-"],
|
||||
[class^="grillade-"] {
|
||||
@media (min-width: $tiny) {
|
||||
display: grid;
|
||||
|
||||
// gutters
|
||||
@if variable_exists(grid-gutters) {
|
||||
$gutter: $grid-gutters !global;
|
||||
}
|
||||
@else {
|
||||
$gutter: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !global;
|
||||
}
|
||||
@each $affix, $size in $gutter {
|
||||
&.has-gutter#{$affix} {
|
||||
grid-gap: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// autogrid
|
||||
.autogrillade,
|
||||
.grillade {
|
||||
@media (min-width: $tiny) {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 1fr;
|
||||
|
||||
// gutters
|
||||
@if variable_exists(grid-gutters) {
|
||||
$gutter: $grid-gutters !global;
|
||||
|
||||
} @else {
|
||||
$gutter: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !global;
|
||||
}
|
||||
@each $affix, $size in $gutter {
|
||||
&.has-gutter#{$affix} {
|
||||
grid-column-gap: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// grid constructor (.grillade-2 to .grillade-$cols)
|
||||
@for $i from 2 through $cols {
|
||||
[class*="grillade-#{$i}"] {
|
||||
grid-template-columns: repeat(#{$i}, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
// grid items constructor (.col-1 to .col-$cols, .row-1 to .row-$cols)
|
||||
@for $i from 1 through $cols {
|
||||
[class*="col-#{$i}"] {
|
||||
grid-column: auto / span #{$i};
|
||||
}
|
||||
|
||||
[class*="row-#{$i}"] {
|
||||
grid-row: auto / span #{$i};
|
||||
}
|
||||
}
|
||||
|
||||
/* 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 : .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*="grillade-"][class*="-small-#{$i}"] {
|
||||
grid-template-columns: repeat(#{$i}, 1fr);
|
||||
}
|
||||
|
||||
[class*="col-"][class*="-small-#{$i}"] {
|
||||
grid-column: auto / span #{$i};
|
||||
}
|
||||
}
|
||||
|
||||
[class*="-small-all"] {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
.item-last {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
// grid offset
|
||||
.grid-offset {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// spanning all columns or rows
|
||||
.col-all {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.row-all {
|
||||
grid-row: 1 / -1;
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Alerts */
|
||||
/* ----------------------------- */
|
||||
/* use .alert-- classes for variants */
|
||||
|
||||
.alert {
|
||||
padding: $spacer-small $spacer-small;
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 0;
|
||||
color: $color-base;
|
||||
border-radius: $border-radius;
|
||||
background-color: $color-muted;
|
||||
|
||||
& a {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
@each $name, $background-color, $color, $border in $variants-list {
|
||||
&--#{$name} {
|
||||
@extend .alert;
|
||||
background-color: $background-color;
|
||||
color: $color;
|
||||
box-shadow: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// alert state variants
|
||||
.alert {
|
||||
&--small {
|
||||
font-size: $font-size-base - 0.4rem;
|
||||
}
|
||||
|
||||
&--big {
|
||||
font-size: $font-size-base + 0.4rem;
|
||||
}
|
||||
|
||||
&--block {
|
||||
width: 100% !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&--disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Arrows */
|
||||
/* ----------------------------- */
|
||||
/* see https://knacss.com/styleguide.html#arrows */
|
||||
|
||||
[class*="icon-arrow--"] {
|
||||
vertical-align: middle;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
mask-size: cover;
|
||||
background-color: $arrow-color;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-arrow--down::after {
|
||||
mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.icon-arrow--up::after {
|
||||
mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%208.596%20L%203.523%2014.973%20C%202.464%2015.935%200.495%2013.72%201.505%2012.791%20L%201.505%2012.791%20L%208.494%205.799%20C%209.138%205.212%2010.655%205.193%2011.29%205.799%20L%2011.29%205.799%20L%2018.49%2012.791%20C%2019.557%2013.809%2017.364%2015.882%2016.262%2014.837%20L%2016.262%2014.837%20L%209.96%208.596%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.icon-arrow--right::after {
|
||||
mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%2011.685%2010.321%20L%205.308%2016.758%20C%204.346%2017.817%206.561%2019.786%207.49%2018.776%20L%207.49%2018.776%20L%2014.482%2011.787%20C%2015.069%2011.142%2015.088%209.626%2014.482%208.991%20L%2014.482%208.991%20L%207.49%201.791%20C%206.472%200.724%204.399%202.916%205.444%204.019%20L%205.444%204.019%20L%2011.685%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.icon-arrow--left::after {
|
||||
mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%208.315%2010.321%20L%2014.692%2016.758%20C%2015.654%2017.817%2013.439%2019.786%2012.51%2018.776%20L%2012.51%2018.776%20L%205.518%2011.787%20C%204.931%2011.142%204.912%209.626%205.518%208.991%20L%205.518%208.991%20L%2012.51%201.791%20C%2013.528%200.724%2015.601%202.916%2014.556%204.019%20L%2014.556%204.019%20L%208.315%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
|
||||
}
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Badges */
|
||||
/* ----------------------------- */
|
||||
/* use .badge-- classes for variants */
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: $spacer-tiny;
|
||||
border-radius: 50%;
|
||||
color: $color-base;
|
||||
background-color: $color-muted;
|
||||
line-height: 1;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding-top: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
@each $name, $background-color, $color, $border in $variants-list {
|
||||
&--#{$name} {
|
||||
@extend .badge;
|
||||
background-color: $background-color;
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// badge state variants
|
||||
.badge {
|
||||
&--small {
|
||||
font-size: $font-size-base - 0.4rem;
|
||||
}
|
||||
|
||||
&--big {
|
||||
font-size: $font-size-base + 0.4rem;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&--disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
85
sass/components/_burger.scss
Executable file
85
sass/components/_burger.scss
Executable file
|
|
@ -0,0 +1,85 @@
|
|||
/*
|
||||
* component nav "burger" button
|
||||
*/
|
||||
/*
|
||||
* HTML template example:
|
||||
* <button class="burger-button" type="button" role="button" aria-label="open/close navigation"><i></i></button>
|
||||
* activate it with a JS toggle-class to .is-active
|
||||
* see doc : https: //www.knacss.com/doc.html#buttons
|
||||
*/
|
||||
|
||||
/*
|
||||
* burger variables (you can change them)
|
||||
*/
|
||||
|
||||
$burger-color : #333;
|
||||
$burger-background : transparent;
|
||||
$burger-hover-background : transparent;
|
||||
$burger-size : 2.6rem;
|
||||
$burger-weight : 5px; // size of stripes
|
||||
$burger-padding : 0;
|
||||
|
||||
/*
|
||||
* burger button styles
|
||||
*/
|
||||
|
||||
.burger-button {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.burger-button > * {
|
||||
display: inline-flex;
|
||||
vertical-align: top;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
height: $burger-size;
|
||||
width: $burger-size;
|
||||
padding: $burger-padding;
|
||||
background-color: $burger-background;
|
||||
background-image: linear-gradient($burger-color, $burger-color);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-origin: content-box;
|
||||
background-size: 100% $burger-weight;
|
||||
transition: .25s;
|
||||
transition-property: transform, background;
|
||||
will-change: transform, background;
|
||||
}
|
||||
|
||||
.burger-button > *::before,
|
||||
.burger-button > *::after {
|
||||
content: "";
|
||||
height: $burger-weight;
|
||||
background: $burger-color;
|
||||
transition: .25s;
|
||||
transition-property: transform, top;
|
||||
will-change: transform, top;
|
||||
}
|
||||
|
||||
.burger-button:hover > * {
|
||||
background-color: $burger-hover-background;
|
||||
}
|
||||
|
||||
.burger-button:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.burger-button.is-active > * {
|
||||
background-image: none;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.burger-button.is-active>*::before {
|
||||
transform: translateY(50%) rotate3d(0, 0, 1, 45deg);
|
||||
}
|
||||
|
||||
.burger-button.is-active>*::after {
|
||||
transform: translateY(-50%) rotate3d(0, 0, 1, -45deg);
|
||||
}
|
||||
71
sass/components/_button.scss
Executable file
71
sass/components/_button.scss
Executable file
|
|
@ -0,0 +1,71 @@
|
|||
/*
|
||||
* basic button component
|
||||
*/
|
||||
/*
|
||||
* HTML template example:
|
||||
* preferably use <button> for buttons !
|
||||
* use .button or .btn (for structure) and .btn-- (for variants) (see appearance mixin)
|
||||
*/
|
||||
|
||||
/*
|
||||
* button reset
|
||||
*/
|
||||
|
||||
%btn {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: $spacer-small $spacer-small-plus;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: 0.25s;
|
||||
transition-property: box-shadow, background-color, color, border;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.button {
|
||||
@extend %btn;
|
||||
|
||||
&:focus {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// button state variants
|
||||
.btn,
|
||||
.button {
|
||||
&--small {
|
||||
padding: $spacer-tiny-plus $spacer-small;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
&--big {
|
||||
padding: $spacer-small-plus $spacer-medium;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
&--block {
|
||||
width: 100% !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&--unstyled {
|
||||
padding: 0;
|
||||
border: none;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,156 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Buttons styling */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* preferably use <button> for buttons !*/
|
||||
/* use .btn-- or .button-- classes for variants */
|
||||
|
||||
%btn {
|
||||
display: inline-block;
|
||||
padding: $spacer-small $spacer-small-plus;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: 0.25s;
|
||||
transition-property: box-shadow, background-color, color, border;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
color: $color-base;
|
||||
border: none;
|
||||
border-radius: $border-radius;
|
||||
background-color: $color-muted;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.button,
|
||||
[type="button"],
|
||||
button {
|
||||
@extend %btn;
|
||||
|
||||
&:focus {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.btn,
|
||||
.button {
|
||||
@each $name, $background-color, $color, $border in $variants-list {
|
||||
&--#{$name} {
|
||||
@extend %btn;
|
||||
background-color: $background-color;
|
||||
color: $color;
|
||||
box-shadow: $border;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: darken( $background-color, 10% );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// button state variants
|
||||
.btn,
|
||||
.button {
|
||||
&--small {
|
||||
padding: $spacer-tiny-plus $spacer-small;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
&--big {
|
||||
padding: $spacer-small-plus $spacer-medium;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
&--block {
|
||||
width: 100% !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&--unstyled {
|
||||
padding: 0;
|
||||
border: none;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// nav "burger" button
|
||||
// activate it with a JS toggle-class to .is-active
|
||||
// recommended HTML : <button class="nav-button" type="button" role="button" aria-label="open/close navigation"><i></i></button>
|
||||
// see doc : https://knacss.com/styleguide.html#buttons
|
||||
.nav-button {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
& > * {
|
||||
display: inline-flex;
|
||||
vertical-align: top;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
height: $burger-size;
|
||||
width: $burger-size;
|
||||
padding: $burger-padding;
|
||||
background-color: $burger-background;
|
||||
background-image: linear-gradient($burger-color, $burger-color);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-origin: content-box;
|
||||
background-size: 100% $burger-weight;
|
||||
transition: .25s;
|
||||
transition-property: transform, background;
|
||||
will-change: transform, background;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
height: $burger-weight;
|
||||
background: $burger-color;
|
||||
transition: .25s;
|
||||
transition-property: transform, top;
|
||||
will-change: transform, top;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
& > * {
|
||||
background-color: $burger-hover-background;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
& > * {
|
||||
background-image: none;
|
||||
justify-content: center;
|
||||
|
||||
&::before {
|
||||
transform: translateY(50%) rotate3d(0,0,1,45deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: translateY(-50%) rotate3d(0,0,1,-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,119 +1,59 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Checkbox, radio, switch */
|
||||
/* ----------------------------- */
|
||||
/* use .checkbox class on input type=checkbox */
|
||||
/* recommended HTML : <input type="checkbox" class="checkbox" id="c1"><label for="c1">click here</label> */
|
||||
/* use .radio class on input type=radio */
|
||||
/* recommended HTML : <input type="radio" class="radio" name="radio" id="r1"><label for="r1">Click here</label> */
|
||||
/* use .switch class on input type=checkbox */
|
||||
// <input type="checkbox" class="switch" id="switch"><label for="switch" class="label">slide to unlock</label>
|
||||
/*
|
||||
* component checkbox
|
||||
*/
|
||||
/*
|
||||
* HTML template example:
|
||||
* <input type="checkbox" class="checkbox" id="c1">
|
||||
* <label for="c1">click here</label>
|
||||
*/
|
||||
|
||||
/*
|
||||
* checkbox variables (you can change them)
|
||||
*/
|
||||
|
||||
$checkbox-color: $white;
|
||||
$checkbox-background: $color-alpha;
|
||||
$checkbox-size: 2rem;
|
||||
$checkbox-border-radius: 4px;
|
||||
|
||||
/*
|
||||
* checkbox styles
|
||||
*/
|
||||
|
||||
// common styles
|
||||
.checkbox {
|
||||
border-radius: $checkbox-border-radius;
|
||||
}
|
||||
|
||||
.switch {
|
||||
border-radius: $switch-border-radius;
|
||||
}
|
||||
|
||||
.radio {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.switch,
|
||||
.checkbox,
|
||||
.radio {
|
||||
.checkbox {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
vertical-align: text-bottom;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
|
||||
& ~ label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::-ms-check {
|
||||
display: none; // unstyle IE checkboxes
|
||||
}
|
||||
}
|
||||
|
||||
// switch styling
|
||||
.switch {
|
||||
width: $switch-size *2;
|
||||
height: $switch-size;
|
||||
line-height: $switch-size;
|
||||
font-size: 70%;
|
||||
box-shadow: inset -#{$switch-size} 0 0 $switch-background,
|
||||
inset 0 0 0 1px $switch-background;
|
||||
transition: box-shadow .15s;
|
||||
background-color: $switch-color;
|
||||
&::before,
|
||||
&::after {
|
||||
font-weight: bold;
|
||||
color: $switch-color;
|
||||
}
|
||||
&::before {
|
||||
content: "✕";
|
||||
float: right;
|
||||
margin-right: $switch-size /3;
|
||||
}
|
||||
&:checked {
|
||||
box-shadow: inset #{$switch-size} 0 0 $color-success,
|
||||
inset 0 0 0 1px $color-success;
|
||||
&::before {
|
||||
content: "✓";
|
||||
float: left;
|
||||
margin-left: $switch-size /3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// checkbox styling
|
||||
.checkbox {
|
||||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
box-shadow: inset 0 0 0 1px $checkbox-background;
|
||||
box-shadow: inset 0 0 0 1px $color-alpha;
|
||||
background-color: $checkbox-color;
|
||||
transition: background-color .15s;
|
||||
&:checked {
|
||||
$red: red($checkbox-color);
|
||||
$green: green($checkbox-color);
|
||||
$blue: blue($checkbox-color);
|
||||
$rgb: rgb($red, $green, $blue);
|
||||
$slice: str-slice(ie-hex-str($rgb), 4);
|
||||
$first: "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220%22%20y%3D%220%22%20viewBox%3D%220%200%208%208%22%20enable-background%3D%22new%200%200%208%208%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20fill%3D%22%23";
|
||||
$last: "%22%20d%3D%22M6.4%2C1L5.7%2C1.7L2.9%2C4.5L2.1%2C3.7L1.4%2C3L0%2C4.4l0.7%2C0.7l1.5%2C1.5l0.7%2C0.7l0.7-0.7l3.5-3.5l0.7-0.7L6.4%2C1L6.4%2C1z%22%20%2F%3E%0A%3C%2Fsvg%3E";
|
||||
$combo: "#{$first}#{$slice}#{$last}";
|
||||
background-image: url($combo);
|
||||
background-size: 60% 60%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: $checkbox-background;
|
||||
}
|
||||
transition: background-color 0.15s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// radio styling
|
||||
.radio {
|
||||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
background-size: 0% 0%;
|
||||
transition: background-size .15s;
|
||||
box-shadow: inset 0 0 0 1px $radio-color;
|
||||
background-color: $radio-background;
|
||||
&:checked {
|
||||
$red: red($radio-color);
|
||||
$green: green($radio-color);
|
||||
$blue: blue($radio-color);
|
||||
$rgb: rgb($red, $green, $blue);
|
||||
$slice: str-slice(ie-hex-str($rgb), 4);
|
||||
$first: "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%22100%22%20height%3D%22100%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%23";
|
||||
$last: "%22/%3E%3C/svg%3E";
|
||||
$combo: "#{$first}#{$slice}#{$last}";
|
||||
background-image: url($combo);
|
||||
background-size: 90% 90%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: $radio-background;
|
||||
}
|
||||
.checkbox + label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.checkbox:disabled + label {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.checkbox:checked {
|
||||
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=");
|
||||
background-size: 60% 60%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: $checkbox-background;
|
||||
}
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Forms styling */
|
||||
/* ----------------------------- */
|
||||
|
||||
[type="color"],
|
||||
[type="date"],
|
||||
[type="datetime-local"],
|
||||
[type="email"],
|
||||
[type="month"],
|
||||
[type="number"],
|
||||
[type="password"],
|
||||
[type="search"],
|
||||
[type="submit"],
|
||||
[type="tel"],
|
||||
[type="text"],
|
||||
[type="time"],
|
||||
[type="url"],
|
||||
[type="week"],
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
border: 0;
|
||||
box-shadow: 0 0 0 1px $forms-color inset;
|
||||
color: $color-base;
|
||||
vertical-align: middle;
|
||||
padding: $spacer-tiny $spacer-small;
|
||||
margin: 0;
|
||||
transition: 0.25s;
|
||||
transition-property: box-shadow, background-color, color, border;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
[type="submit"] {
|
||||
background-color: $forms-color;
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[readonly] {
|
||||
background-color: $color-muted;
|
||||
}
|
||||
|
||||
select {
|
||||
padding-right: 2rem;
|
||||
border-radius: $border-radius;
|
||||
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
|
||||
background-position: right .6rem center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.2rem;
|
||||
}
|
||||
|
||||
/* hiding IE11 arrow */
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 5em;
|
||||
vertical-align: top;
|
||||
resize: vertical;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* 'x' appears on right of search input when text is entered. This removes it */
|
||||
[type="search"] {
|
||||
&::-webkit-search-decoration,
|
||||
&::-webkit-search-cancel-button,
|
||||
&::-webkit-search-results-button,
|
||||
&::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
input:-moz-placeholder,
|
||||
textarea:-moz-placeholder {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: #777;
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Media object */
|
||||
/* ----------------------------- */
|
||||
/* recommended HTML : <div class="media"><img class="media-figure"><div class="media-content"></div></div> */
|
||||
/* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
|
||||
|
||||
@media (min-width: $tiny) {
|
||||
.media {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
&-content {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
// vertical align image
|
||||
&-figure--center {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
// reverse variant
|
||||
&--reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
60
sass/components/_quote.scss
Executable file
60
sass/components/_quote.scss
Executable file
|
|
@ -0,0 +1,60 @@
|
|||
/*
|
||||
* component quote
|
||||
*/
|
||||
/*
|
||||
* HTML template example:
|
||||
* <blockquote>
|
||||
* <p>Lorem Elsass Ipsum mitt picon bière</p>
|
||||
* </blockquote>
|
||||
*/
|
||||
|
||||
/*
|
||||
* quotes variables (you can change them)
|
||||
*/
|
||||
|
||||
$blockquote-color: #454d5d;
|
||||
|
||||
/*
|
||||
* quotes styles
|
||||
*/
|
||||
|
||||
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: $blockquote-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»" "“" "”";
|
||||
}
|
||||
}
|
||||
59
sass/components/_radio.scss
Executable file
59
sass/components/_radio.scss
Executable file
|
|
@ -0,0 +1,59 @@
|
|||
/*
|
||||
* component radio
|
||||
*/
|
||||
/*
|
||||
* HTML template example:
|
||||
* <input type="radio" class="radio" name="radio" id="r1">
|
||||
* <label for="r1">Click here</label>
|
||||
*/
|
||||
|
||||
/*
|
||||
* radio variables (you can change them)
|
||||
*/
|
||||
|
||||
$radio-color: $color-alpha;
|
||||
$radio-background: $white;
|
||||
$radio-size: 2rem;
|
||||
$radio-border-radius: 50%;
|
||||
|
||||
/*
|
||||
* radio styles
|
||||
*/
|
||||
|
||||
.radio {
|
||||
border-radius: $radio-border-radius;
|
||||
}
|
||||
|
||||
.radio {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: $radio-size;
|
||||
height: $radio-size;
|
||||
vertical-align: text-bottom;
|
||||
outline: 0;
|
||||
box-shadow: inset 0 0 0 1px $color-alpha;
|
||||
background-color: $radio-background;
|
||||
transition: background-size 0.15s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.radio + label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.radio:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.radio:disabled + label {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.radio:checked {
|
||||
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%2240%22%20height%3D%2240%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%23ffffff%22/%3E%3C/svg%3E");
|
||||
background-size: 70% 70%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: $color-alpha;
|
||||
}
|
||||
19
sass/components/_select.scss
Executable file
19
sass/components/_select.scss
Executable file
|
|
@ -0,0 +1,19 @@
|
|||
/*
|
||||
* basic select component
|
||||
*/
|
||||
/*
|
||||
HTML template example:
|
||||
<select>
|
||||
<option value="salade">salade</option>
|
||||
<option value="tomate">tomate</option>
|
||||
<option value="oignons">oignons</option>
|
||||
</select>
|
||||
*/
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
|
||||
background-position: right 0.8rem center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.2rem;
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==skip links */
|
||||
/* ----------------------------- */
|
||||
/* see https://www.alsacreations.com/article/lire/572-Les-liens-d-evitement.html */
|
||||
|
||||
/* styling skip links */
|
||||
.skip-links {
|
||||
position: absolute;
|
||||
|
||||
& a {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
padding: 0.5em;
|
||||
background: black;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
|
||||
&:focus {
|
||||
position: static;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Tables */
|
||||
/* ----------------------------- */
|
||||
|
||||
table,
|
||||
.table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
vertical-align: top;
|
||||
margin-bottom: $spacer-medium;
|
||||
}
|
||||
|
||||
.table {
|
||||
display: table;
|
||||
border: 1px solid $table-border;
|
||||
background: $table-background;
|
||||
|
||||
&--zebra {
|
||||
& tbody tr:nth-child(odd) {
|
||||
background: $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
& caption {
|
||||
caption-side: bottom;
|
||||
padding: $spacer-small;
|
||||
color: $table-caption-color;
|
||||
font-style: italic;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
& td,
|
||||
& th {
|
||||
padding: 0.3rem 0.6rem;
|
||||
min-width: $spacer-medium;
|
||||
vertical-align: top;
|
||||
border: 1px $table-border dotted;
|
||||
text-align: left;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
& thead {
|
||||
color: $table-head-color;
|
||||
background: $table-head-background;
|
||||
}
|
||||
}
|
||||
|
||||
.table--auto {
|
||||
table-layout: auto;
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Tabs */
|
||||
/* ----------------------------- */
|
||||
/* see example on https://knacss.com/styleguide.html#tabs */
|
||||
/* NOTE : tabs need JavaScript to be activated */
|
||||
|
||||
.tabs-menu {
|
||||
border-bottom: 2px solid $tabs-border;
|
||||
|
||||
&-link {
|
||||
display: block;
|
||||
margin-bottom: -2px;
|
||||
padding: $spacer-tiny $spacer-medium-plus;
|
||||
border-bottom: 4px solid transparent;
|
||||
color: $tabs-color;
|
||||
background: $tabs-background;
|
||||
text-decoration: none;
|
||||
border-radius: $tabs-border-radius $tabs-border-radius 0 0;
|
||||
transition: .25s;
|
||||
transition-property: color, border, background-color;
|
||||
|
||||
&.is-active {
|
||||
border-bottom-color: $tabs-active-border;
|
||||
color: $tabs-active-color;
|
||||
background: $tabs-active-background;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-bottom-color: $tabs-active-border;
|
||||
color: $tabs-active-color;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
@media (min-width: $small) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-content-item {
|
||||
padding-top: $spacer-small;
|
||||
|
||||
&[aria-hidden="true"] {
|
||||
visibility: hidden;
|
||||
@extend .visually-hidden;
|
||||
}
|
||||
|
||||
&[aria-hidden="false"] {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Tags */
|
||||
/* ----------------------------- */
|
||||
/* use .tag-- classes for variants */
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 3px $spacer-tiny;
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
color: $color-base;
|
||||
border-radius: $border-radius;
|
||||
background-color: $color-muted;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.tag {
|
||||
@each $name, $background-color, $color, $border in $variants-list {
|
||||
&--#{$name} {
|
||||
@extend .tag;
|
||||
background-color: $background-color;
|
||||
color: $color;
|
||||
box-shadow: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// tag state variants
|
||||
.tag {
|
||||
&--small {
|
||||
font-size: $font-size-base - 0.4rem;
|
||||
}
|
||||
|
||||
&--big {
|
||||
font-size: $font-size-base + 0.4rem;
|
||||
}
|
||||
|
||||
&--block {
|
||||
width: 100% !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&--disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
80
sass/knacss.scss
Executable file → Normal file
80
sass/knacss.scss
Executable file → Normal file
|
|
@ -1,65 +1,31 @@
|
|||
/*!
|
||||
* www.KNACSS.com v7.1.3 (february, 12 2020) @author: Alsacreations, Raphael Goetter
|
||||
* KNACSS Reborn: Just keep it simple!
|
||||
* @author: Alsacreations
|
||||
* v1.0.0 2020/11
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Table Of Content */
|
||||
/* ----------------------------- */
|
||||
// WARNING : Only Core and Utilities are imported by default. Just add other files if you need them.
|
||||
|
||||
/*
|
||||
1- Reboot (basic reset)
|
||||
2- Base :
|
||||
- Reset
|
||||
- Print
|
||||
- Layout (alignment, modules, positionning)
|
||||
- Utilities (width and spacers helpers)
|
||||
- Responsive helpers
|
||||
- WordPress reset (disabled by default)
|
||||
- Grillade (Grid System)
|
||||
3- Components :
|
||||
- Media object
|
||||
- Skip Links for accessibility
|
||||
- Tables
|
||||
- Forms
|
||||
- Buttons
|
||||
- Checkbox
|
||||
- Tabs
|
||||
- Tags
|
||||
- Badges
|
||||
- Alerts
|
||||
*/
|
||||
// CORE
|
||||
@import "abstracts/variables-sass";
|
||||
@import "abstracts/mixins-sass";
|
||||
|
||||
// WARNING : you should comment the following @import (variables)
|
||||
// and move variables file from KNACSS folder to your own project folder!
|
||||
@import "abstracts/variables";
|
||||
@import "base/reset-base";
|
||||
@import "base/reset-accessibility";
|
||||
@import "base/reset-forms";
|
||||
@import "base/reset-print";
|
||||
@import "base/layout";
|
||||
|
||||
@import "abstracts/mixins";
|
||||
// UTILITY CLASSES
|
||||
// @import "utils/utils-global";
|
||||
// @import "utils/utils-spacers";
|
||||
// @import "utils/grillade";
|
||||
|
||||
// Core Libraries
|
||||
@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 "base/grillade-flex"
|
||||
// Note that none of these files are prefixed by an underscore, in order to compile them.
|
||||
@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/tabs"; // tabs 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
|
||||
// COMPONENTS (add them only if you need)
|
||||
// @import "components/button";
|
||||
// @import "components/burger";
|
||||
// @import "components/checkbox";
|
||||
// @import "components/radio";
|
||||
// @import "components/select";
|
||||
// @import "components/quote";
|
||||
|
|
|
|||
65
sass/utils/_utils-global.scss
Normal file
65
sass/utils/_utils-global.scss
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
/*
|
||||
* Global utility classes
|
||||
*/
|
||||
|
||||
@each $class, $prop, $value in $utils {
|
||||
.#{$class} {
|
||||
#{$prop}: #{$value};
|
||||
}
|
||||
|
||||
// loop for each breakpoint
|
||||
@each $bp, $bpv in $breakpoints {
|
||||
@media (min-width: #{$bpv}) {
|
||||
.#{$bp}\:#{$class} {
|
||||
#{$prop}: #{$value};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// multi-properties utils
|
||||
.is-unstyled {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
.is-disabled,
|
||||
[disabled] {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed !important;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
.text-normal {
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
// loop for each breakpoint
|
||||
@each $bp, $bpv in $breakpoints {
|
||||
@media (min-width: #{$bpv}) {
|
||||
.#{$bp}\: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;
|
||||
}
|
||||
.#{$bp}\:is-unstyled {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
.#{$bp}\:is-disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed !important;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
.#{$bp}\:text-normal {
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
134
sass/utils/_utils-spacers.scss
Normal file
134
sass/utils/_utils-spacers.scss
Normal file
|
|
@ -0,0 +1,134 @@
|
|||
/* Spacers utility classes */
|
||||
|
||||
// loop for each spacer
|
||||
@each $key,
|
||||
$value in $spacers {
|
||||
|
||||
.p-#{$key} {
|
||||
padding: $value;
|
||||
}
|
||||
|
||||
.pt-#{$key} {
|
||||
padding-top: $value;
|
||||
}
|
||||
|
||||
.pr-#{$key} {
|
||||
padding-right: $value;
|
||||
}
|
||||
|
||||
.pb-#{$key} {
|
||||
padding-bottom: $value;
|
||||
}
|
||||
|
||||
.pl-#{$key} {
|
||||
padding-left: $value;
|
||||
}
|
||||
|
||||
.px-#{$key} {
|
||||
padding-left: $value;
|
||||
padding-right: $value;
|
||||
}
|
||||
|
||||
.py-#{$key} {
|
||||
padding-top: $value;
|
||||
padding-bottom: $value;
|
||||
}
|
||||
|
||||
.m-#{$key} {
|
||||
margin: $value;
|
||||
}
|
||||
|
||||
.mt-#{$key} {
|
||||
margin-top: $value;
|
||||
}
|
||||
|
||||
.mr-#{$key} {
|
||||
margin-right: $value;
|
||||
}
|
||||
|
||||
.mb-#{$key} {
|
||||
margin-bottom: $value;
|
||||
}
|
||||
|
||||
.ml-#{$key} {
|
||||
margin-left: $value;
|
||||
}
|
||||
|
||||
.mx-#{$key} {
|
||||
margin-left: $value;
|
||||
margin-right: $value;
|
||||
}
|
||||
|
||||
.my-#{$key} {
|
||||
margin-top: $value;
|
||||
margin-bottom: $value;
|
||||
}
|
||||
|
||||
// loop for each breakpoint
|
||||
@each $bp,
|
||||
$bpv in $breakpoints {
|
||||
|
||||
@media (min-width: #{$bpv}) {
|
||||
.#{$bp}\:p-#{$key} {
|
||||
padding: $value;
|
||||
}
|
||||
|
||||
.#{$bp}\:pt-#{$key} {
|
||||
padding-top: $value;
|
||||
}
|
||||
|
||||
.#{$bp}\:pr-#{$key} {
|
||||
padding-right: $value;
|
||||
}
|
||||
|
||||
.#{$bp}\:pb-#{$key} {
|
||||
padding-bottom: $value;
|
||||
}
|
||||
|
||||
.#{$bp}\:pl-#{$key} {
|
||||
padding-left: $value;
|
||||
}
|
||||
|
||||
.#{$bp}\:px-#{$key} {
|
||||
padding-left: $value;
|
||||
padding-right: $value;
|
||||
}
|
||||
|
||||
.#{$bp}\:py-#{$key} {
|
||||
padding-top: $value;
|
||||
padding-bottom: $value;
|
||||
}
|
||||
|
||||
.#{$bp}\:m-#{$key} {
|
||||
margin: $value;
|
||||
}
|
||||
|
||||
.#{$bp}\:mt-#{$key} {
|
||||
margin-top: $value;
|
||||
}
|
||||
|
||||
.#{$bp}\:mr-#{$key} {
|
||||
margin-right: $value;
|
||||
}
|
||||
|
||||
.#{$bp}\:mb-#{$key} {
|
||||
margin-bottom: $value;
|
||||
}
|
||||
|
||||
.#{$bp}\:ml-#{$key} {
|
||||
margin-left: $value;
|
||||
}
|
||||
|
||||
.#{$bp}\:mx-#{$key} {
|
||||
margin-left: $value;
|
||||
margin-right: $value;
|
||||
}
|
||||
|
||||
.#{$bp}\:my-#{$key} {
|
||||
margin-top: $value;
|
||||
margin-bottom: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
152
sass/utils/grillade.scss
Normal file
152
sass/utils/grillade.scss
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
/* --------------------------------------- */
|
||||
/* ==Grillade : ultra light Grid Layout */
|
||||
/* --------------------------------------- */
|
||||
// Grillade is heavily inspired by tailwindcss.com Grid utility classes
|
||||
|
||||
|
||||
// use these variables only for a standalone Grillade
|
||||
// in KNACSS, you shall modify variables file instead
|
||||
$grid-columns: 6 !default;
|
||||
|
||||
@if variable_exists(spacers) {
|
||||
$spacers: $spacers !global;
|
||||
}
|
||||
@else {
|
||||
$spacers : (
|
||||
'0' : 0,
|
||||
'1' : .5rem,
|
||||
'2' : .75rem,
|
||||
'3' : 1rem,
|
||||
'4' : 1.5rem,
|
||||
'5' : 2rem,
|
||||
'6' : 3rem,
|
||||
'7' : 5rem,
|
||||
'auto' : auto
|
||||
) !global;
|
||||
}
|
||||
|
||||
@if variable_exists(breakpoints) {
|
||||
$breakpoints: $breakpoints !global;
|
||||
}
|
||||
@else {
|
||||
$breakpoints : (
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 1024px,
|
||||
xl: 1330px
|
||||
) !global;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
// grid class for each breakpoint
|
||||
@each $bp, $bpv in $breakpoints {
|
||||
@media (min-width: #{$bpv}) {
|
||||
.#{$bp}\:grid {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* grid-template-columns classes */
|
||||
@for $i from 1 through $grid-columns {
|
||||
|
||||
.grid-cols-#{$i} {
|
||||
grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
|
||||
}
|
||||
@each $bp, $bpv in $breakpoints {
|
||||
|
||||
@media (min-width: #{$bpv}) {
|
||||
.#{$bp}\:grid-cols-#{$i} {
|
||||
grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* gap classes */
|
||||
@each $key, $value in $spacers {
|
||||
|
||||
.gap-#{$key} {
|
||||
gap: $value;
|
||||
}
|
||||
.gap-x-#{$key} {
|
||||
column-gap: $value;
|
||||
}
|
||||
.gap-y-#{$key} {
|
||||
row-gap: $value;
|
||||
}
|
||||
|
||||
@each $bp, $bpv in $breakpoints {
|
||||
|
||||
@media (min-width: #{$bpv}) {
|
||||
.#{$bp}\:gap-#{$key} {
|
||||
gap: $value;
|
||||
}
|
||||
.#{$bp}\:gap-x-#{$key} {
|
||||
column-gap: $value;
|
||||
}
|
||||
.#{$bp}\:gap-y-#{$key} {
|
||||
row-gap: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* grid-items classes */
|
||||
@for $i from 1 through $grid-columns {
|
||||
|
||||
.col-start-#{$i} {
|
||||
grid-column-start: #{$i};
|
||||
}
|
||||
.col-end-#{$i} {
|
||||
grid-column-end: #{$i};
|
||||
}
|
||||
.col-span-#{$i} {
|
||||
grid-column: span #{$i} / span #{$i};
|
||||
}
|
||||
.col-span-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.row-start-#{$i} {
|
||||
grid-row-start: #{$i};
|
||||
}
|
||||
.row-end-#{$i} {
|
||||
grid-row-end: #{$i};
|
||||
}
|
||||
.row-span-#{$i} {
|
||||
grid-row: span #{$i} / span #{$i};
|
||||
}
|
||||
|
||||
// loop for each breakpoint
|
||||
@each $bp, $bpv in $breakpoints {
|
||||
|
||||
@media (min-width: #{$bpv}) {
|
||||
.#{$bp}\:col-start-#{$i} {
|
||||
grid-column-start: #{$i};
|
||||
}
|
||||
.#{$bp}\:col-end-#{$i} {
|
||||
grid-column-end: #{$i};
|
||||
}
|
||||
.#{$bp}\:col-span-#{$i} {
|
||||
grid-column: span #{$i} / span #{$i};
|
||||
}
|
||||
.#{$bp}\:col-span-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.#{$bp}\:row-start-#{$i} {
|
||||
grid-row-start: #{$i};
|
||||
}
|
||||
.#{$bp}\:row-end-#{$i} {
|
||||
grid-row-end: #{$i};
|
||||
}
|
||||
.#{$bp}\:row-span-#{$i} {
|
||||
grid-row: span #{$i} / span #{$i};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in a new issue