Merge branch 'v7'
This commit is contained in:
Raphael Goetter
commit
c1b5f89c6e
70 changed files with 4049 additions and 4221 deletions
126
README.md
126
README.md
|
|
@ -2,105 +2,57 @@
|
|||
|
||||
http://www.knacss.com
|
||||
|
||||
KNACSS, c'est une sorte de feuille de style CSS "reset" sur-vitaminée qui permet de commencer un projet à partir de zéro tout en tenant compte de bonnes pratiques générales (accessibilité, performance, responsive webdesign).
|
||||
KNACSS, c'est une sorte de feuille de style CSS "reset" sur-vitaminée qui permet de commencer un projet à partir de zéro tout en tenant compte de bonnes pratiques générales (accessibilité, performance, responsive webdesign, grille de mise en forme).
|
||||
|
||||
KNACSS prend en charge les styles de base, mais également la typographie, les modèles de boîte, les alignements et positionnements d'éléments, les grilles de mise en page, dans l'esprit d'être adapté à toutes les tailles d'écran (reponsive). Le tout automatiquement !
|
||||
Conçu par l'agence web [Alsacreations.fr](http://alsacreations.fr) et pensé pour être couplé avec des préprocesseurs tel que Sass, le micro-framework KNACSS est employé quotidiennement sur toute sorte de projet web quel que soit son type ou son envergure.
|
||||
|
||||
Conçu par l'agence web [Alsacreations.fr](http://alsacreations.fr) et pensé pour être couplé avec des préprocesseurs tel que Sass, le micro-framework KNACSS est employé quotidiennement sur toute sorte de projets web quel que soit son type ou son envergure.
|
||||
## Documentation
|
||||
|
||||
- [**Documentation et Guide de styles**](https://knacss.com/styleguide.html)
|
||||
- [**Pense-bête en PDF**](http://knacss.com/KNACSS-cheatsheet.pdf)
|
||||
- Site web de présentation de KNACSS : http://knacss.com
|
||||
|
||||
## Fonctionnalités
|
||||
|
||||
- reset
|
||||
- typographie
|
||||
- Responsive
|
||||
- grille de mise en forme
|
||||
- composants (formulaires, tableaux, boutons, flèches, onglets, checkbox, radio et bouton "switch" stylés)
|
||||
- variables et mixin Sass
|
||||
|
||||
## Compatibilité
|
||||
|
||||
KNACSS est - dans sa grande majorité - compatible avec l'ensemble des navigateurs desktop et mobiles à partir d'IE10 inclus.
|
||||
KNACSS est - dans sa grande majorité - compatible avec l'ensemble des navigateurs desktop et mobiles à partir d'IE10 inclus. Pour les détails, se référer à la documentation.
|
||||
|
||||
## Installation
|
||||
|
||||
Selon votre profil (débutant, utilisateur de Sass, adepte de Bower / npm / yarn), l'installation est différente.
|
||||
Voir la documentation.
|
||||
|
||||
### Vous êtes débutant ou pressé ?
|
||||
## Mise à jour depuis une version précédente de KNACSS ?
|
||||
|
||||
La version courte est "il n'y a rien à installer".
|
||||
La version `7.*.*` de KNACSS est une version majeure, ce qui implique que certaines fonctionnalités ne sont plus forcément rétro-compatibles avec les versions précédentes.
|
||||
|
||||
KNACSS n'est constitué que d'un seul fichier CSS (minifié ou non selon vos goûts) :
|
||||
Voici les principales modifications dont il faudra tenir compte lors d'une mise à jour :
|
||||
|
||||
- en version [CSS classique et lisible](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/css/knacss-unminified.css)
|
||||
- ou en [version minifiée](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/css/knacss.css)
|
||||
### Modifications majeures entre la v7 et la v6
|
||||
|
||||
Si vous ne comptez pas décortiquer le fichier CSS, il est préférable d'opter pour la version minifiée, plus légère.
|
||||
Il vous suffit ensuite de l'insérer à votre page HTML, avant votre propre feuille de style, bien entendu :
|
||||
- architecture globale revisitée (vendor, config, library, components)
|
||||
- variables de projet modifiées et renommées
|
||||
- refonte complète du système de grille (dorénavant basé sur Grid Layout)
|
||||
- déplacement des variables de gouttières de grillade.scss vers variables.scss
|
||||
- déplacement des variables de breakpoints de breakpoints.scss vers variables.scss
|
||||
|
||||
```HTML
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Vive les knacks!</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<link rel="stylesheet" href="css/knacss.css">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
Pour tous détails, voir le fichier Changelog.
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
### Modifications majeures entre la v6 et la v5
|
||||
|
||||
### Vous préférez Sass ?
|
||||
|
||||
KNACSS est conçu et pensé pour être adapté au préprocesseur Sass. Nos fichiers de travail sont donc par défaut plutôt des `.scss` et non des `.css`.
|
||||
|
||||
Si, comme nous, vous intégrez à l'aide de préprocesseurs, KNACSS va vous faciliter la vie dès le début du projet puisqu'un [dossier de configuration](https://github.com/alsacreations/KNACSS/tree/v6/sass/_config) contenant toutes les variables du projet, les breakpoints et les mixins est intégré.
|
||||
Libre à vous de modifier ces fichiers selon les contraintes de votre projet.
|
||||
|
||||
La version Sass, à compiler par vos soins, sera bien évidemment plus malléable grâce à l'apport de variables et fonctions.
|
||||
Vous pouvez également inclure ou non les fichiers partiels qui vous intéressent (tableaux, formulaires, grilles, WordPress, classes utilitaires, etc.).
|
||||
|
||||
Téléchargez [KNACSS complet](https://github.com/alsacreations/KNACSS/archive/master.zip) pour bénéficier de toute l'architecture de l'outil, avec les fichiers Sass, package.json et gulpfile.js si nécessaires.
|
||||
|
||||
### Installation via Bower, npm ou yarn
|
||||
|
||||
- via [Bower](http://bower.io/) : `bower install knacss`
|
||||
- via [npm](https://www.npmjs.com/) : `npm install knacss`
|
||||
- via [yarn](https://yarnpkg.com/) : `yarn install knacss` ou `yarn add knacss`
|
||||
|
||||
**Attention**, si vous importez KNACSS automatiquement via Bower, npm ou yarn (par exemple dans un dossier `vendor` ou `node_modules`), les fichiers de configuration (variables par exemple) risquent d'être écrasés à chaque mise à jour de KNACSS. **Nous vous invitons à en faire une copie dans votre dossier de travail et à commenter l'appel au fichier de config de `vendor`**.
|
||||
|
||||
|
||||
## Comment débuter ?
|
||||
|
||||
Que vous ayez opté pour la version CSS simple ou la version Sass, il est vivement conseillé de parcourir la [**documentation**](https://github.com/raphaelgoetter/KNACSS/tree/master/doc) détaillée et illustrée avant de vous jeter sur KNACSS.
|
||||
|
||||
Sachez qu'un [**Pense-bête en PDF**](http://knacss.com/KNACSS-cheatsheet.pdf) et un [**Guide de styles**](http://codepen.io/raphaelgoetter/full/LNwOjz/) sont également disponibles pour vous souvenir des classes utiles de KNACSS.
|
||||
|
||||
Dans le cas d'un usage via Sass, vos deux fichiers de travail principaux seront :
|
||||
- le fichier `sass/_config/_variables.scss` contenant toutes les variables du projet à définir une fois pour toute au départ
|
||||
- le fichier `sass/knacss.scss` qui importe tous les autres fichiers que vous risquez d'employer dans votre projet.
|
||||
|
||||
En phase d'intégration, il vous suffit de compiler le fichier `sass/knacss.scss` pour obtenir votre fichier CSS final.
|
||||
|
||||
|
||||
|
||||
### Préfixes navigateurs
|
||||
|
||||
Certaines fonctionnalités avancées de KNACSS nécessitent d'employer toute une panoplie de préfixes CSS (`-webkit-`, `-moz-`, `-ms-`, …) pour être certain que les propriétés CSS fonctionneront partout.
|
||||
|
||||
Au sein de la version classique CSS de KNACSS, l'ensemble des préfixes est présent, **vous n'avez donc pas à vous en soucier** (Autoprefixer réglé à "last 2 versions").
|
||||
|
||||
**Par contre, dans la version Sass de KNACSS, les préfixes n'apparaissent pas** pour ne pas polluer la lecture du fichier de travail. **Il vous sera donc nécessaire de les ajouter**, de préférence automatiquement grâce à un plugin ou à l'excellent outil qu'est [autoprefixer](https://github.com/postcss/autoprefixer).
|
||||
|
||||
### Mise à jour depuis une version précédente de KNACSS ?
|
||||
|
||||
La version `6.*.*` de KNACSS est une version majeure, ce qui implique que certaines fonctionnalités ne sont plus forcément rétro-compatibles avec les versions précédentes `5.*.*`.
|
||||
|
||||
Voici les principales modifications dont il faudra tenir compte lors d'une bascule vers la version 6 de KNACSS :
|
||||
|
||||
#### Modifications majeures depuis la `5.*.*`
|
||||
|
||||
- le grille de mise en forme a été entièrement modifiée. Détails de modifications: https://github.com/alsacreations/KNACSS/issues/207
|
||||
- la grille de mise en forme a été entièrement modifiée. Détails de modifications: https://github.com/alsacreations/KNACSS/issues/207
|
||||
- les positionnements tabulaires. `.row`, `.col` et `.line`, devenus inutiles et confusants depuis Flexbox, ont été supprimés
|
||||
- de nouvelles valeurs de breakpoints ont été définies. Détails: https://github.com/alsacreations/KNACSS/issues/210
|
||||
- suppression de l'outils *include-media* (crée des bugs d'encodage, nécessite un temps d'apprentissage, et n'apporte pas grand chose au final)
|
||||
- suppression de l'outil *include-media* (crée des bugs d'encodage, nécessite un temps d'apprentissage, et n'apporte pas grand chose au final)
|
||||
|
||||
#### Modifications majeures depuis la `4.*.*`
|
||||
### Modifications majeures entre la v5 et la v4
|
||||
|
||||
- suppression de la version LESS (à partir de la version KNACSS 5.0, seul le préprocesseur Sass est encore pris en charge)
|
||||
- suppression des fallbacks pour IE8-IE9 (à partir de la version KNACSS 5.0, seul IE10 et supérieurs sont pris en charge)
|
||||
|
|
@ -109,21 +61,9 @@ Voici les principales modifications dont il faudra tenir compte lors d'une bascu
|
|||
- ajout de la library include-media (http://include-media.com/)
|
||||
- grille "grillade" à présent en mobile first
|
||||
|
||||
#### Modifications majeures depuis la `3.*.*`
|
||||
### Modifications majeures entre la v4 et la v3
|
||||
|
||||
- La rétrocompatibilité n'est pas préservée pour certains noms de classes ( `.left`, `.start`, `.fl`, `.table-`, `.flex-start`, `.flex-end`) : `.left` ne correspond plus à un `float: left` mais à un `margin-right: auto`, il faut dorénavant employer `.fl` pour obtenir un flottant à gauche; `.right` ne correspond plus à un `float: right` mais à un `margin-left: auto`, il faut dorénavant employer `.fr` pour obtenir un flottant à droite; `.start` et `.end` n'existent plus
|
||||
- Les noms des conteneurs de grille ont changé et nécessitent systématiquement un trait d'union : ancien nommage : `.grid2`, `.grid1-3`; nouveau nommage : `.grid-2`, `.grid-1-3`
|
||||
- Les classes relatives à flexbox ont été renommées pour ne pas entrer en conflit avec des outils tels que Modernizer (qui ajoutent aux-aussi ce genre de classes). Nouveau nommage :
|
||||
`.flex-container, .flex-container-h`, `.flex-container-v`, `.flex-item-fluid`, `.flex-item-center`, `.flex-item-first, .flex-item-medium, .flex-item-last`
|
||||
|
||||
### Utilisateur de SPIP ?
|
||||
|
||||
Le CMS SPIP impose une classe générique `.fr` sur l'élément `<html>`, or cette classe est également employée pour les positionnements flottants dans KNACSS.
|
||||
|
||||
Si vous êtes un utilisateur de SPIP, nous vous conseillons de modifier les fichiers CSS de KNACSS et de remplacer les classes `.fr` et `.fl` par `:not(html) .fr` et `:not(html) .fl`
|
||||
|
||||
## Liens utiles
|
||||
|
||||
* Site web de KNACSS : http://knacss.com
|
||||
* [**Documentation détaillée**](https://github.com/raphaelgoetter/KNACSS/tree/master/doc)
|
||||
* Sur Alsacreations.com : ["découverte du framework KNACSS"](http://www.alsacreations.com/tuto/lire/1577-decouverte-du-framework-css-KNACSS.html)
|
||||
|
|
|
|||
35
changelog.md
35
changelog.md
|
|
@ -1,3 +1,32 @@
|
|||
# changelog v7.0.0beta (août - novembre 2017)
|
||||
- modifications, mises à jour :
|
||||
- architecture globale revisitée (vendor, config, library, components)
|
||||
- remplacement de normalize.css par Bootstrap reboot.css
|
||||
- déplacement des variables de gouttières de grillade.scss vers variables.scss
|
||||
- déplacement des variables de breakpoints de breakpoints.scss vers variables.scss
|
||||
- regroupement des styles des tableaux
|
||||
- renommage des variables couleur de projets
|
||||
- renommage des variables de composants
|
||||
- renommage des variables d'espacement (`$tiny-value` -> `$spacer-tiny`)
|
||||
- automatisation des classes utilitaires via Sass
|
||||
- suppression du namespace "kna-"
|
||||
- refonte :
|
||||
- système de grille (dorénavant basé sur Grid Layout)
|
||||
- boutons, avec possibilités de variantes (primary, success, warning, etc.)
|
||||
- styles de formulaires
|
||||
- styles des tableaux
|
||||
- l'objet autogrid passe en Grid Layout
|
||||
- ajouts :
|
||||
- des badges (tags), avec possibilités de variantes (primary, success, warning, etc.)
|
||||
- des alertes, avec possibilités de variantes (primary, success, warning, etc.)
|
||||
- d'un bouton de navigation `.nav-button`
|
||||
- des checkbox, radio et bouton "switch" stylés
|
||||
- des onglets (tabs)
|
||||
- des flèches courantes (haut, droit, bas, gauche) en SVG data-URI
|
||||
- création d'un mixin de grille
|
||||
- création d'un mixin de tailles de polices (responsive)
|
||||
- `* {min-width: 0}` pour éviter la valeur `auto` sur les flex-items et grid-items
|
||||
|
||||
# changelog v6.1.2 (21 juin 2017)
|
||||
- alignement des helpers flexbox sur ceux de Bootstrap (`.d-flex`, `.flex-row`, `.flex-column`, `.mr-auto`)
|
||||
- alignement des breakpoints sur ceux de Bootstrap (576, 768, 992, 1200) et réorganisation des intervalles
|
||||
|
|
@ -10,14 +39,14 @@
|
|||
# changelog v6.1.0 (3 mars 2017)
|
||||
- passage à [Normalize 5.0.0](https://github.com/necolas/normalize.css/blob/5.0.0/CHANGELOG.md)
|
||||
- ajout de variables pour tailles de polices différentes sur petits et sur grands écrans (`$h1-size` et `$h1-size-l` par exemple). Par défaut, les tailles "mobile" sont appliquées, et les tailles "desktop" s'appliquent en min-width `$tiny +1`
|
||||
- convention de nommage des variables pour faciliter les recherches : `$base-color` devient `$color-base`, `$link-color` devient `$color-link`, etc.
|
||||
- convention de nommage des variables pour faciliter les recherches : `$base-color` devient `$color-base`, `$link-color` devient `$link-color`, etc.
|
||||
- typo fix
|
||||
|
||||
# changelog v6.0.8 (10 janvier 2017)
|
||||
- application de `$color-link-hover` uniquement si différent de `$color-link`
|
||||
- application de `$link-color-hover` uniquement si différent de `$link-color`
|
||||
|
||||
# changelog v6.0.7 (7 décembre 2016)
|
||||
- application de `$font-stack-headings` uniquement si différent de `$font-stack-common`
|
||||
- application de `$font-family-headings` uniquement si différent de `$font-stack-base`
|
||||
|
||||
# changelog v6.0.6 (2 décembre 2016)
|
||||
- Grillade : redéfinition du périmètre de `-small` : passe de `(min-width: ($tiny + 1)) and (max-width: $small)` à `(min-width: ($tiny + 1)) and (max-width: $medium)` (de 544px à 991px par défaut)
|
||||
|
|
|
|||
1
css/grillade-flex.css
Normal file
1
css/grillade-flex.css
Normal file
File diff suppressed because one or more lines are too long
1
css/grillade-grid.css
Normal file
1
css/grillade-grid.css
Normal file
|
|
@ -0,0 +1 @@
|
|||
@media (min-width:480px){[class*=" grid-"],[class^=grid-]{display:grid;grid-auto-flow:dense}[class*=" grid-"].has-gutter,[class^=grid-].has-gutter{grid-gap:1rem}[class*=" grid-"].has-gutter-l,[class^=grid-].has-gutter-l{grid-gap:2rem}[class*=" grid-"].has-gutter-xl,[class^=grid-].has-gutter-xl{grid-gap:4rem}}[class*=grid-1]{grid-template-columns:repeat(1,1fr)}[class*=grid-2]{grid-template-columns:repeat(2,1fr)}[class*=grid-3]{grid-template-columns:repeat(3,1fr)}[class*=grid-4]{grid-template-columns:repeat(4,1fr)}[class*=grid-5]{grid-template-columns:repeat(5,1fr)}[class*=grid-6]{grid-template-columns:repeat(6,1fr)}[class*=grid-7]{grid-template-columns:repeat(7,1fr)}[class*=grid-8]{grid-template-columns:repeat(8,1fr)}[class*=grid-9]{grid-template-columns:repeat(9,1fr)}[class*=grid-10]{grid-template-columns:repeat(10,1fr)}[class*=grid-11]{grid-template-columns:repeat(11,1fr)}[class*=grid-12]{grid-template-columns:repeat(12,1fr)}[class*=col-1]{grid-column:auto/span 1}[class*=row-1]{grid-row:auto/span 1}[class*=col-2]{grid-column:auto/span 2}[class*=row-2]{grid-row:auto/span 2}[class*=col-3]{grid-column:auto/span 3}[class*=row-3]{grid-row:auto/span 3}[class*=col-4]{grid-column:auto/span 4}[class*=row-4]{grid-row:auto/span 4}[class*=col-5]{grid-column:auto/span 5}[class*=row-5]{grid-row:auto/span 5}[class*=col-6]{grid-column:auto/span 6}[class*=row-6]{grid-row:auto/span 6}[class*=col-7]{grid-column:auto/span 7}[class*=row-7]{grid-row:auto/span 7}[class*=col-8]{grid-column:auto/span 8}[class*=row-8]{grid-row:auto/span 8}[class*=col-9]{grid-column:auto/span 9}[class*=row-9]{grid-row:auto/span 9}[class*=col-10]{grid-column:auto/span 10}[class*=row-10]{grid-row:auto/span 10}[class*=col-11]{grid-column:auto/span 11}[class*=row-11]{grid-row:auto/span 11}[class*=col-12]{grid-column:auto/span 12}[class*=row-12]{grid-row:auto/span 12}@media (min-width:480px) and (max-width:767px){[class*=grid-][class*="-small-1"]{grid-template-columns:repeat(1,1fr)}[class*=col-][class*="-small-1"]{grid-column:auto/span 1}[class*=grid-][class*="-small-2"]{grid-template-columns:repeat(2,1fr)}[class*=col-][class*="-small-2"]{grid-column:auto/span 2}[class*=grid-][class*="-small-3"]{grid-template-columns:repeat(3,1fr)}[class*=col-][class*="-small-3"]{grid-column:auto/span 3}[class*=grid-][class*="-small-4"]{grid-template-columns:repeat(4,1fr)}[class*=col-][class*="-small-4"]{grid-column:auto/span 4}[class*="-small-all"]{grid-column:1/-1}}.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
|
|
@ -1,129 +0,0 @@
|
|||
# KNACSS
|
||||
|
||||
http://www.knacss.com
|
||||
|
||||
KNACSS, c'est une sorte de feuille de style CSS "reset" sur-vitaminée qui permet de commencer un projet à partir de zéro tout en tenant compte de bonnes pratiques générales (accessibilité, performance, responsive webdesign).
|
||||
|
||||
KNACSS prend en charge les styles de base, mais également la typographie, les modèles de boîte, les alignements et positionnements d'éléments, les grilles de mise en page, dans l'esprit d'être adapté à toutes les tailles d'écran (reponsive). Le tout automatiquement !
|
||||
|
||||
Conçu par l'agence web [Alsacreations.fr](http://alsacreations.fr) et pensé pour être couplé avec des préprocesseurs tel que Sass, le micro-framework KNACSS est employé quotidiennement sur toute sorte de projets web quel que soit son type ou son envergure.
|
||||
|
||||
## Compatibilité
|
||||
|
||||
KNACSS est - dans sa grande majorité - compatible avec l'ensemble des navigateurs desktop et mobiles à partir d'IE10 inclus.
|
||||
|
||||
## Installation
|
||||
|
||||
Selon votre profil (débutant, utilisateur de Sass, adepte de Bower / npm), l'installation est différente.
|
||||
|
||||
### Vous êtes débutant ou pressé ?
|
||||
|
||||
La version courte est "il n'y a rien à installer".
|
||||
|
||||
KNACSS n'est constitué que d'un seul fichier CSS (minifié ou non selon vos goûts) :
|
||||
|
||||
- en version [CSS classique et lisible](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/css/knacss-unminified.css)
|
||||
- ou en [version minifiée](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/css/knacss.css)
|
||||
|
||||
Si vous ne comptez pas décortiquer le fichier CSS, il est préférable d'opter pour la version minifiée, plus légère.
|
||||
Il vous suffit ensuite de l'insérer à votre page HTML, avant votre propre feuille de style, bien entendu :
|
||||
|
||||
```HTML
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Vive les knacks!</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<link rel="stylesheet" href="css/knacss.css">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Vous préférez Sass ?
|
||||
|
||||
KNACSS est conçu et pensé pour être adapté au préprocesseur Sass. Nos fichiers de travail sont donc par défaut plutôt des `.scss` et non des `.css`.
|
||||
|
||||
Si, comme nous, vous intégrez à l'aide de préprocesseurs, KNACSS va vous faciliter la vie dès le début du projet puisqu'un [dossier de configuration](https://github.com/alsacreations/KNACSS/tree/v6/sass/_config) contenant toutes les variables du projet, les breakpoints et les mixins est intégré.
|
||||
Libre à vous de modifier ces fichiers selon les contraintes de votre projet.
|
||||
|
||||
La version Sass, à compiler par vos soins, sera bien évidemment plus malléable grâce à l'apport de variables et fonctions.
|
||||
Vous pouvez également inclure ou non les fichiers partiels qui vous intéressent (tableaux, formulaires, grilles, WordPress, classes utilitaires, etc.).
|
||||
|
||||
Téléchargez [KNACSS complet](https://github.com/alsacreations/KNACSS/archive/master.zip) pour bénéficier de toute l'architecture de l'outil, avec les fichiers Sass, package.json et gulpfile.js si nécessaires.
|
||||
|
||||
### Installation via Bower, npm ou yarn
|
||||
|
||||
- via [Bower](http://bower.io/) : `bower install knacss`
|
||||
- via [npm](https://www.npmjs.com/) : `npm install knacss`
|
||||
- via [yarn](https://yarnpkg.com/) : `yarn install knacss` ou `yarn add knacss`
|
||||
|
||||
**Attention**, si vous importez KNACSS automatiquement via Bower, npm ou yarn (par exemple dans un dossier `vendor` ou `node_modules`), les fichiers de configuration (variables par exemple) risquent d'être écrasés à chaque mise à jour de KNACSS. **Nous vous invitons à en faire une copie dans votre dossier de travail et à commenter l'appel au fichier de config de `vendor`**.
|
||||
|
||||
|
||||
## Comment débuter ?
|
||||
|
||||
Que vous ayez opté pour la version CSS simple ou la version Sass, il est vivement conseillé de parcourir la [**documentation**](https://github.com/raphaelgoetter/KNACSS/tree/master/doc) détaillée et illustrée avant de vous jeter sur KNACSS.
|
||||
|
||||
Sachez qu'un [**Pense-bête en PDF**](http://knacss.com/KNACSS-cheatsheet.pdf) et un [**Guide de styles**](http://codepen.io/raphaelgoetter/full/LNwOjz/) sont également disponibles pour vous souvenir des classes utiles de KNACSS.
|
||||
|
||||
Dans le cas d'un usage via Sass, vos deux fichiers de travail principaux seront :
|
||||
- le fichier `sass/_config/_variables.scss` contenant toutes les variables du projet à définir une fois pour toute au départ
|
||||
- le fichier `sass/knacss.scss` qui importe tous les autres fichiers que vous risquez d'employer dans votre projet.
|
||||
|
||||
En phase d'intégration, il vous suffit de compiler le fichier `sass/knacss.scss` pour obtenir votre fichier CSS final.
|
||||
|
||||
|
||||
|
||||
### Préfixes navigateurs
|
||||
|
||||
Certaines fonctionnalités avancées de KNACSS nécessitent d'employer toute une panoplie de préfixes CSS (`-webkit-`, `-moz-`, `-ms-`, …) pour être certain que les propriétés CSS fonctionneront partout.
|
||||
|
||||
Au sein de la version classique CSS de KNACSS, l'ensemble des préfixes est présent, **vous n'avez donc pas à vous en soucier** (Autoprefixer réglé à "last 2 versions").
|
||||
|
||||
**Par contre, dans la version Sass de KNACSS, les préfixes n'apparaissent pas** pour ne pas polluer la lecture du fichier de travail. **Il vous sera donc nécessaire de les ajouter**, de préférence automatiquement grâce à un plugin ou à l'excellent outil qu'est [autoprefixer](https://github.com/postcss/autoprefixer).
|
||||
|
||||
### Mise à jour depuis une version précédente de KNACSS ?
|
||||
|
||||
La version `6.*.*` de KNACSS est une version majeure, ce qui implique que certaines fonctionnalités ne sont plus forcément rétro-compatibles avec les versions précédentes `5.*.*`.
|
||||
|
||||
Voici les principales modifications dont il faudra tenir compte lors d'une bascule vers la version 6 de KNACSS :
|
||||
|
||||
#### Modifications majeures depuis la `5.*.*`
|
||||
|
||||
- le grille de mise en forme a été entièrement modifiée. Détails de modifications: https://github.com/alsacreations/KNACSS/issues/207
|
||||
- les positionnements tabulaires. `.row`, `.col` et `.line`, devenus inutiles et confusants depuis Flexbox, ont été supprimés
|
||||
- de nouvelles valeurs de breakpoints ont été définies. Détails: https://github.com/alsacreations/KNACSS/issues/210
|
||||
- suppression de l'outils *include-media* (crée des bugs d'encodage, nécessite un temps d'apprentissage, et n'apporte pas grand chose au final)
|
||||
|
||||
#### Modifications majeures depuis la `4.*.*`
|
||||
|
||||
- suppression de la version LESS (à partir de la version KNACSS 5.0, seul le préprocesseur Sass est encore pris en charge)
|
||||
- suppression des fallbacks pour IE8-IE9 (à partir de la version KNACSS 5.0, seul IE10 et supérieurs sont pris en charge)
|
||||
- restructuration / renommage des fichiers avec préfixes `_config-`, `_layout-`, `_library-`, `_object-`, `_override-`
|
||||
- renommage des éléments de grilles : `.flex-item-double` --> `.grid-item-double` (plus cohérent)
|
||||
- ajout de la library include-media (http://include-media.com/)
|
||||
- grille "grillade" à présent en mobile first
|
||||
|
||||
#### Modifications majeures depuis la `3.*.*`
|
||||
|
||||
- La rétrocompatibilité n'est pas préservée pour certains noms de classes ( `.left`, `.start`, `.fl`, `.table-`, `.flex-start`, `.flex-end`) : `.left` ne correspond plus à un `float: left` mais à un `margin-right: auto`, il faut dorénavant employer `.fl` pour obtenir un flottant à gauche; `.right` ne correspond plus à un `float: right` mais à un `margin-left: auto`, il faut dorénavant employer `.fr` pour obtenir un flottant à droite; `.start` et `.end` n'existent plus
|
||||
- Les noms des conteneurs de grille ont changé et nécessitent systématiquement un trait d'union : ancien nommage : `.grid2`, `.grid1-3`; nouveau nommage : `.grid-2`, `.grid-1-3`
|
||||
- Les classes relatives à flexbox ont été renommées pour ne pas entrer en conflit avec des outils tels que Modernizer (qui ajoutent aux-aussi ce genre de classes). Nouveau nommage :
|
||||
`.flex-container, .flex-container-h`, `.flex-container-v`, `.flex-item-fluid`, `.flex-item-center`, `.flex-item-first, .flex-item-medium, .flex-item-last`
|
||||
|
||||
### Utilisateur de SPIP ?
|
||||
|
||||
Le CMS SPIP impose une classe générique `.fr` sur l'élément `<html>`, or cette classe est également employée pour les positionnements flottants dans KNACSS.
|
||||
|
||||
Si vous êtes un utilisateur de SPIP, nous vous conseillons de modifier les fichiers CSS de KNACSS et de remplacer les classes `.fr` et `.fl` par `:not(html) .fr` et `:not(html) .fl`
|
||||
|
||||
## Liens utiles
|
||||
|
||||
* Site web de KNACSS : http://knacss.com
|
||||
* [**Documentation détaillée**](https://github.com/raphaelgoetter/KNACSS/tree/master/doc)
|
||||
* Sur Alsacreations.com : ["découverte du framework KNACSS"](http://www.alsacreations.com/tuto/lire/1577-decouverte-du-framework-css-KNACSS.html)
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
# Typographie
|
||||
|
||||
Accessible avant tout, KNACSS propose une gamme de tailles de polices d'unités fluides (`em`, `rem`) plutôt que le pixel, figé et non malléable, donc moins accessible.
|
||||
|
||||
En résumé, voilà les bases typographiques de KNACSS :
|
||||
|
||||
- choix d'unités fluides (`em`, `rem`)
|
||||
- taille de police définie à 62.5% sur HTML (soit un équivalent de 10px, très pratique pour les conversions en rem)
|
||||
- taille de base des contenus de 1.4em (soit un équivalent de 14px) modifiable dans la configuration LESS / Sass
|
||||
- tailles de polices définies pour les niveaux de titres et des modificateurs tels que `.small`, `.smaller`, `.big`, `.bigger`, etc.
|
||||
|
||||
## Reset "light"
|
||||
|
||||
Le reset de KNACSS est volontairement minimal, le but n'étant pas de tout mettre à zéro pour le redéfinir par la suite.
|
||||
|
||||
La feuille de style débute ainsi par une variante de l'incontournable `* {box-sizing: border-box}` afin d'imposer le très pratique modèle de boîte CSS3 à tous les éléments du document.
|
||||
|
||||
S'en suivent quelques mises à zéro de marges, alignements par défaut des images, et quelques spécificités sur des élements tels que `blockquote`, `figure`, `canvas`, `video` ou autres `svg`.
|
||||
|
||||
## Masquage
|
||||
|
||||
À noter que KNACSS prévoit une classe dédiée aux éléments devant être masqués sur écrans graphiques tout en demeurant accessibles aux assistances techniques. Il s'agit de la classe `.visually-hidden`, où le choix des hideux mots-clés `!important` se justifie :
|
||||
|
||||
```css
|
||||
.visually-hidden {
|
||||
position: absolute !important;
|
||||
border: 0 !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
}
|
||||
```
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
# Alignements
|
||||
|
||||
Différentes classes utilitaires intégrées à KNACSS sont prévues pour gérer les alignements d'éléments.
|
||||
|
||||
- les textes et contenus "inline" sont gérés via les classes `.txtleft`, `.txtright` et `.txtcenter` qui agiront sur la propriété CSS `text-align`
|
||||
- les blocs sont alignés avec les classes `.left`, `.right` et `.center` qui affectent la valeur `auto` à la propriété `margin`
|
||||
- les flottements sont gérés via les classes `.fl` (pour `float: left`) et `.fr` (pour `float: right`)
|
||||
|
||||
## Cas des flottants et les .mod
|
||||
|
||||
Le positionnement flottant compte parmi les plus employés mais n'est pas exempt d'inconvénients. Le principal étant d'être un positionnement hors du flux qui nécessitera des ajustements (clearfix et autres anti-débordements).
|
||||
|
||||
KNACSS a prévu des classes spécifiques pour mieux vous en sortir avec les flottants :
|
||||
|
||||
- **le super élément `.mod`**. Il a plein d'avantages: il contient les flottants (ils ne débordent pas) et il ne s'écoule pas autour d'un frère flottant (il s'affiche proprement à côté) et il crée un [contexte "BFC"](http://www.alsacreations.com/astuce/lire/1543-le-contexte-de-formatage-block-en-css.html)
|
||||
- `.clearfix`. Les éléments disposant de cette classe contiennent les flottants, tel les `.mod`
|
||||
- les éléments `.clear` bénéficient d'un autre pouvoir : celui de toujours se pousser sous un flottant précédent. Ils sont dédiés aux empilements verticaux des contenus.
|
||||
|
||||
## Concrètement : je veux faire quoi ?
|
||||
|
||||
### Centrer horizontalement
|
||||
|
||||
#### Du texte ou une image
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="txtcenter">
|
||||
<img src="licorne.png" alt="aïe ça pique">
|
||||
</div>
|
||||
```
|
||||
|
||||
#### Un bloc
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<section>
|
||||
<div class="center w50">centré horizontalement</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
### Centrer verticalement
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<section class="flex-container-v">
|
||||
<div class="center w50">centré horizontalement et verticalement</div>
|
||||
</section>
|
||||
```
|
||||
|
|
@ -1,139 +0,0 @@
|
|||
# Positionnements avec KNACSS
|
||||
|
||||
Au-delà des alignements d'éléments, KNACSS permet de positionner et d'architecturer vos gabarits à travers plusieurs solutions.
|
||||
|
||||
Dans cette page de documentation, nous étudierons en détail chaque cas concret auquel vous risquez d'être confronté et proposerons une réponse adaptée.
|
||||
|
||||
## Différents choix offerts
|
||||
|
||||
Les types de positionnements inclus nativement dans KNACSS sont les suivants :
|
||||
|
||||
- positionnement flottant
|
||||
- positionnement avec `display: inline-block`
|
||||
- positionnement avec Flexbox
|
||||
|
||||
Il n'y a pas de mystère : chaque type de positionnement est capable de répondre à différents types de contraintes. Il n'y a pas de meilleur choix qu'un autre.
|
||||
|
||||
Votre décision pourra être guidée par les indices suivants :
|
||||
- il est généralement plus profitable de ne pas opter pour des positionnement hors-flux (`float`, `position: absolute`)
|
||||
- Flexbox est certainement le modèle le plus polyvalent et propre, il est compatible qu'à partir de IE10+.
|
||||
|
||||
## Concrètement : je veux faire quoi ?
|
||||
|
||||
### Deux blocs voisins de largeur fixe
|
||||
|
||||
|
||||
|
||||
Les choix offerts avec KNACSS :
|
||||
|
||||
#### flottant et flottant
|
||||
|
||||
La classe `.fl` pour `float: left` permet à un élément d'être flottant à gauche.
|
||||
|
||||
Il vous suffit de faire flotter vos deux éléments et de leur attribuer la largeur souhaitée pour qu'ils s'affichent l'un à côté de l'autre :
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="fl w400p">premier</div>
|
||||
<div class="fl w400p">deuxième</div>
|
||||
```
|
||||
|
||||
- **Avantage :** simple, rapide, intuitif, hyper compatible
|
||||
- **Inconvénient :** positionnement hors du flux, nécessitera des ajustements (clearfix et autres anti-débordements)
|
||||
|
||||
#### inline-block et inline-block
|
||||
|
||||
La propriété `display: inline-block` (sous forme de classe `.inbl` chez KNACSS) permet à un élément de s'afficher tel un "inline" tout en étant dimensionné.
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="inbl w400p">premier</div>
|
||||
<div class="inbl w400p">deuxième</div>
|
||||
```
|
||||
|
||||
- **Avantage :** positionnement dans le flux, compatible dès IE8
|
||||
- **Inconvénient :** un espace "whitespace" apparaîtra entre les deux div et nécessitera de coller les balises ou de bidouiller en CSS pour être supprimé
|
||||
|
||||
|
||||
#### Flexbox
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="flex-container">
|
||||
<div class="w400p">premier</div>
|
||||
<div class="w400p">deuxième</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
- **Avantage :** fluide, propre, simple
|
||||
- **Inconvénient :** compatibilité IE10 minimum
|
||||
|
||||
### Deux blocs voisins dont un fixe et un fluide
|
||||
|
||||
|
||||
|
||||
Les choix offerts avec KNACSS :
|
||||
|
||||
#### flottant et .mod
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="fl w400p">premier</div>
|
||||
<div class="mod">deuxième</div>
|
||||
```
|
||||
|
||||
#### inline-block et inline-block
|
||||
|
||||
Pas possible
|
||||
|
||||
|
||||
#### Flexbox
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="flex-container">
|
||||
<div class="w400p">premier</div>
|
||||
<div class="flex-item-fluid">deuxième</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Deux blocs voisins de même hauteur
|
||||
|
||||
|
||||
|
||||
Les choix offerts avec KNACSS :
|
||||
|
||||
#### flottant et flottant
|
||||
|
||||
Pas possible
|
||||
|
||||
#### inline-block et inline-block
|
||||
|
||||
Pas possible
|
||||
|
||||
|
||||
#### Flexbox
|
||||
|
||||
Là aussi c'est automatique : les enfants d'un conteneur `flexbox` ont tous par défaut la même hauteur.
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="flex-container">
|
||||
<div>premier</div>
|
||||
<div>deuxième</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Plusieurs blocs voisins de même taille
|
||||
|
||||
|
||||
|
||||
Si vous souhaitez réaliser des constructions de plusieurs éléments de même taille (fixe ou fluide) avec ou sans espace entre les éléments (gouttière), je vous invite à prendre connaissance des possibilités de **grilles** offertes par KNACSS.
|
||||
|
||||
Voir **[la Doc au point 03-grilles](https://github.com/raphaelgoetter/KNACSS/blob/master/doc/03-grilles.md)**.
|
||||
|
||||
### Schnaps.it, générateur de templates KNACSS
|
||||
|
||||
Alsacréations tient à jour un générateur de gabarits HTML/CSS basé sur le framework KNACSS, **[Schnaps.it](http://schnaps.it/)**, n'hésitez pas à en user et en abuser !
|
||||
|
||||
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
# Grilles de mise en page
|
||||
|
||||
"Grillade" est un système de grille simple et élaboré avec CSS3 Flexbox. Il est intégré par défaut dans le micro-framework KNACSS d'Alsacréations mais peut être utilisé de manière autonome sans nécessiter KNACSS ou d'autre dépendance.
|
||||
|
||||
Grillade a les caractéristiques globales suivantes :
|
||||
|
||||
- Double système de grille :
|
||||
- Mono-ligne : possibilité par défaut d'émuler [l'objet "autogrid"](http://codepen.io/raphaelgoetter/pen/KMgBJd?editors=1100) : `.grid` affiche sur une ligne autant d'enfants que nécessaires (et de taille identique)
|
||||
- Multi-ligne : possibilité de passer en multi-lignes dès que l'on ajoute un suffixe numéroté (ex. `.grid-2`, `.grid-3` ... `.grid-12`)
|
||||
- "Mobile-first" : par défaut une grille sera disposée sur une colonne, et ne s'active que lorsque l'écran dépasse le breakpoint `$tiny`
|
||||
- Largeurs de colonnes fluides et égales par défaut, mais possibilité de définir individuellement la taille de chaque enfant si besoin (ex. `.one-half`, `.one-third`, `.one-quarter`, `.two-thirds`, etc.)
|
||||
- Possibilité d'inverser toute la grille grâce au suffixe `--reverse`
|
||||
- Possibilité de préciser le nombre de colonnes en taille d'écran "small" à l'aide du suffixe `-small-X` (X colonnes)
|
||||
- Possibilité d'appliquer une gouttière entre les éléments
|
||||
- Possibilité d'offsets (pull / push)
|
||||
- Possibilité de réordonner les éléments (au début / à la fin)
|
||||
- Possibilité de réaliser ses propres grilles multi-colonnes via un mixin Sass. ex. `.o-grid-perso { @include grid(4, 3rem); }`
|
||||
|
||||
Spécificités techniques :
|
||||
|
||||
- Grillade est basé sur CSS3 Flexbox, ce qui le rend incompatible avec les anciennes versions d'Internet Explorer (IE9 inclus) ainsi que certains anciens navigateurs (Android <4.4 par exemple)
|
||||
- Les préfixes CSS3 (`-webkit-`, `-moz-`, `-ms-`, …) sont pris en charge au sein de la version CSS de Grillade, mais pas dans sa version Sass. Il vous sera donc nécessaire de les ajouter, de préférence automatiquement grâce à l'excellent outil autoprefixer.
|
||||
- Les valeurs par défaut des points de rupture responsive (Breakpoints) de Grillade sont : `$tiny = 544px` et `$small = 768px`, vous pouvez modifier ou ajouter des valeurs dans la version Sass.
|
||||
|
||||
**documentation complète, illustrée et détaillée sur le site http://grillade.knacss.com**
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
# Tableaux de données
|
||||
|
||||
KNACSS propose une feuille de style minimale appliquée aux tableaux de données ainsi qu'aux éléments disposant d'une classe `.table`.
|
||||
|
||||
Pour débuter, KNACSS impose un modèle d'affichage fixé à tous les tableaux via `table-layout: fixed;`. Ainsi, ce ne sera plus le contenu qui décidera de la largeur des cellules, mais ce que vous aurez spécifié dans les tailles CSS.
|
||||
|
||||
```css
|
||||
table,
|
||||
.table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
vertical-align: top;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.table {
|
||||
display: table;
|
||||
}
|
||||
table#recaptcha_table,
|
||||
table.table-auto {
|
||||
table-layout: auto;
|
||||
}
|
||||
caption {
|
||||
padding: 10px;
|
||||
color: #555;
|
||||
font-style: italic;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
padding: 0.3em 0.8em;
|
||||
border: 1px #aaa dotted;
|
||||
vertical-align: top;
|
||||
min-width: 20px;
|
||||
cursor: default;
|
||||
text-align: left;
|
||||
}
|
||||
```
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
# Formulaires
|
||||
|
||||
Afin d'harmoniser l'affichage par défaut des éléments de formulaires au sein de l'ensemble des navigateurs, un certain nombre de styles est prévu dans KNACSS.
|
||||
Pour constituer cette base de "bonnes pratiques", les crédits reviennent notamment aux ressources suivantes :
|
||||
|
||||
- [HTML5boilerplate](https://html5boilerplate.com/),
|
||||
- [github.com/nathansmith/formalize](http://github.com/nathansmith/formalize),
|
||||
- [sitepen.com](http://www.sitepen.com)
|
||||
|
||||
Le reset "formulaire" de KNACSS tient compte des éléments suivants : `form`, `input`, `fieldset`, `button`, `select`, `label`, `legend`, `textarea`, etc.
|
||||
|
||||
Notez également qu'en attribuant la classe `.btn` à un élément, vous le considérerez (et stylerez) tel un bouton de formulaire.
|
||||
|
|
@ -1,148 +0,0 @@
|
|||
# Helpers
|
||||
|
||||
Les "Helpers" sont des classes purement visuelles et utilitaires (non "sémantiques"), pas très jolie mais rudement pratiques en production pour alléger vos feuilles de styles.
|
||||
|
||||
**Attention toutefois !** Ce type de classes conduit fréquemment [à des abus au sein de votre code HTML](http://blog.goetter.fr/2014/11/10/bien-utiliser-un-framework-css/).
|
||||
|
||||
Par exemple, Si vous avez 20 images au comportement identique dans la page, ne les affublez pas de classes visuelles multiples telles que `img class="mod clearfix left inbl w200p pas mb1 large-mb2 small-mbn"` mais optez plutôt pour une classe personnalisée : `img class="media"` par exemple.
|
||||
|
||||
**Méthode :** Limitez-vous à 4 noms de classes au grand maximum par élément HTML. Si vous pensez qu’il vous en faut davantage, il est temps d’envisager une classe personnalisée, ou de profiter des pré-processeurs CSS.
|
||||
|
||||
_Les valeurs de helpers peuvent être modifiées au sein du fichier de configuration LESS / Sass._
|
||||
|
||||
## les Helpers de largeur
|
||||
|
||||
Largeurs fluides (en pourcentage) :
|
||||
|
||||
```css
|
||||
.w10 {
|
||||
width: 10%;
|
||||
}
|
||||
.w20 {
|
||||
width: 20%;
|
||||
}
|
||||
.w25 {
|
||||
width: 25%;
|
||||
}
|
||||
...
|
||||
.w100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Largeurs fixes (en pixel) :
|
||||
|
||||
```css
|
||||
.w50p {
|
||||
width: 50px;
|
||||
}
|
||||
.w100p {
|
||||
width: 100px;
|
||||
}
|
||||
.w150p {
|
||||
width: 150px;
|
||||
}
|
||||
...
|
||||
.w960p {
|
||||
width: 960px;
|
||||
}
|
||||
.w1140p {
|
||||
width: 1140px;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Largeurs spéciales :
|
||||
|
||||
```css
|
||||
.mw960p {
|
||||
max-width: 960px;
|
||||
}
|
||||
.mw1140p {
|
||||
max-width: 1140px;
|
||||
}
|
||||
.wauto {
|
||||
width: auto;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## les Helpers d'espacement
|
||||
|
||||
Les helpers d'espacement comportent des classes dédiées aux marges externes (margin) et aux marges internes (padding).
|
||||
|
||||
Leur nommage est assez intuitif :
|
||||
|
||||
- p,m = padding, margin
|
||||
- a,t,r,b,l = all, top, right, bottom,left
|
||||
- s,m,l,n (ou 0) = small, medium, large, none (ou 0)
|
||||
|
||||
Exemples :
|
||||
|
||||
- `.prs` signifie "padding-right small" (où "small" est défini dans votre fichier de configuration, par défaut 5px)
|
||||
- `.man` signifie "margin all none" (fonctionne aussi avec la syntaxe `.ma0`)
|
||||
|
||||
### les marges externes (margin)
|
||||
|
||||
```css
|
||||
.man,
|
||||
.ma0 {
|
||||
margin: 0;
|
||||
}
|
||||
.mas {
|
||||
margin: 10px;
|
||||
}
|
||||
.mam {
|
||||
margin: 20px;
|
||||
}
|
||||
.mal {
|
||||
margin: 40px;
|
||||
}
|
||||
.mtn,
|
||||
.mt0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.mts {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.mtm {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.mtl {
|
||||
margin-top: 40px;
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
### les marges internes (padding)
|
||||
|
||||
```css
|
||||
.ptn,
|
||||
.pt0 {
|
||||
padding-top: 0;
|
||||
}
|
||||
.pts {
|
||||
padding-top: 10px;
|
||||
}
|
||||
.ptm {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.ptl {
|
||||
padding-top: 40px;
|
||||
}
|
||||
.prn,
|
||||
.pr0 {
|
||||
padding-right: 0;
|
||||
}
|
||||
.prs {
|
||||
padding-right: 10px;
|
||||
}
|
||||
.prm {
|
||||
padding-right: 20px;
|
||||
}
|
||||
.prl {
|
||||
padding-right: 40px;
|
||||
}
|
||||
...
|
||||
```
|
||||
|
|
@ -1,198 +0,0 @@
|
|||
# Responsive Webdesign
|
||||
|
||||
## Points de rupture
|
||||
|
||||
Par défaut, KNACSS tient compte des valeurs de points de rupture suivants :
|
||||
|
||||
```
|
||||
// breakpoints (choose unit you prefer)
|
||||
$tiny: 543px !default; // or 'em' if you prefer, of course
|
||||
$small: 767px !default;
|
||||
$medium: 991px !default;
|
||||
$large: 1199px !default;
|
||||
$extra-large: 1439px !default;
|
||||
```
|
||||
|
||||
_Les valeurs des points de rupture peuvent être modifiées au sein du fichier de configuration LESS / Sass._
|
||||
|
||||
## Convention d'écriture
|
||||
|
||||
### Choix des valeurs de breakpoints
|
||||
|
||||
1. Choisir principalement des valeurs de breakpoints selon votre design, pas par rapport à des devices (se servir des variables de breakpoints fournies si l'on ne peut pas se baser sur son design)
|
||||
2. En plus de vos propres valeurs, il est possible d'employer :
|
||||
- les variables fournies (`$tiny`, `$small`, `$medium`, `$large`),
|
||||
- mais aussi des alias qui représentent des intervalles et que l'on utilise sous forme de mixins (voi plus bas)
|
||||
3. Éviter de multiplier les valeurs. Un maximum de 5 ou 6 breakpoints devrait suffire dans la grande majorité des projets
|
||||
4. **Pour éviter les intervalles qui se chevauchent, ou des Media Queries trop variés, adopter la convention suivante pour définir les intervalles :
|
||||
`(max-width: $BP) and (min-width: ($BP + 1))`**
|
||||
|
||||
Exemple :
|
||||
|
||||
Non, pas bien :
|
||||
```
|
||||
@media (min-width: 767px) {...}
|
||||
@media (max-width: 768px) {...}
|
||||
```
|
||||
|
||||
Oui, bien :
|
||||
```
|
||||
@media (min-width: 768px) {...}
|
||||
@media (max-width: 767px) {...}
|
||||
@media (max-width: $small-screen) {...}
|
||||
@media (min-width: $small-screen + 1) and (max-width: $large-screen) {...}
|
||||
```
|
||||
|
||||
## Mixins "Alias"
|
||||
|
||||
En addition aux variables, des mixins de breakpoints "utilitaires" (des "alias" des valeurs précédentes) liées aux tailles de devices (forcément indicatifs, mais simples à retenir) sont prévues.
|
||||
|
||||
Les mixins sont activés à l'aide de l'instruction `respond-to()`. Exemple d'usage :
|
||||
|
||||
```
|
||||
// styles
|
||||
.when-tablet-up {
|
||||
@include respond-to("small-up") {
|
||||
background: green;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.is-hidden-mobile {
|
||||
@include respond-to("tiny") {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```
|
||||
// Additionnal "utility" breakpoints aliases
|
||||
// ex. @include respond-to("medium-up") {...}
|
||||
@function breakpoint($bp) {
|
||||
@if $bp == 'tiny' {
|
||||
@return '(max-width: #{$tiny})';
|
||||
}
|
||||
@else if $bp == 'small' {
|
||||
@return '(max-width: #{$small})';
|
||||
}
|
||||
@else if $bp == 'medium' {
|
||||
@return '(max-width: #{$medium})';
|
||||
}
|
||||
@else if $bp == 'large' {
|
||||
@return '(max-width: #{$large})';
|
||||
}
|
||||
@else if $bp == 'extra-large' {
|
||||
@return '(max-width: #{$extra-large})';
|
||||
}
|
||||
@else if $bp == 'tiny-up' {
|
||||
@return '(min-width: #{$tiny + 1})';
|
||||
}
|
||||
@else if $bp == 'small-up' {
|
||||
@return '(min-width: #{$small + 1})';
|
||||
}
|
||||
@else if $bp == 'medium-up' {
|
||||
@return '(min-width: #{$medium + 1})';
|
||||
}
|
||||
@else if $bp == 'large-up' {
|
||||
@return '(min-width: #{$large + 1})';
|
||||
}
|
||||
@else if $bp == 'extra-large-up' {
|
||||
@return '(min-width: #{$extra-large + 1})';
|
||||
}
|
||||
@else if $bp == 'retina' {
|
||||
@return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)';
|
||||
}
|
||||
}
|
||||
|
||||
@mixin respond-to($value) {
|
||||
$string: breakpoint($value);
|
||||
@media screen and #{$string} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
Voir le CodePen : http://codepen.io/raphaelgoetter/pen/EyRwAp/?editors=1100
|
||||
|
||||
|
||||
## Préfixes de classe
|
||||
|
||||
Pour les points de rupture "large", "medium", "small" et "tiny", des préfixes de classes ont été introduits dans KNACSS :
|
||||
|
||||
- `.large-*` : préfixe KNACSS destiné aux styles sur écrans larges
|
||||
- `.medium-*` : préfixe KNACSS destiné aux styles sur écrans medium
|
||||
- `.small-*` : préfixe KNACSS destiné aux styles sur écrans small
|
||||
- `.tiny-*` : préfixe KNACSS destiné aux styles sur écrans tiny
|
||||
|
||||
### Exemple : le point de rupture "tiny"
|
||||
|
||||
Voici quelques-unes des classes dédiées aux écrans de très petite taille… Le mot-clé `!important` est nécessaire pour être certain que les styles écrasent bien les styles appliqués par défaut.
|
||||
|
||||
Masquage / visibilité :
|
||||
|
||||
```css
|
||||
.tiny-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
.tiny-visible {
|
||||
display: block !important;
|
||||
}
|
||||
```
|
||||
|
||||
Modèles d'affichage :
|
||||
|
||||
```css
|
||||
.tiny-no-float {
|
||||
float: none;
|
||||
}
|
||||
.tiny-inbl {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
vertical-align: top;
|
||||
}
|
||||
```
|
||||
|
||||
Largeurs :
|
||||
|
||||
```css
|
||||
.tiny-w25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
.tiny-w33 {
|
||||
width: 33.3333% !important;
|
||||
}
|
||||
.tiny-w50 {
|
||||
width: 50% !important;
|
||||
}
|
||||
.tiny-w66 {
|
||||
width: 66.6666% !important;
|
||||
}
|
||||
.tiny-w75 {
|
||||
width: 75% !important;
|
||||
}
|
||||
.tiny-w100,
|
||||
.tiny-wauto {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
clear: none !important;
|
||||
width: auto !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
border: 0;
|
||||
}
|
||||
```
|
||||
|
||||
Marges :
|
||||
|
||||
```css
|
||||
.tiny-man,
|
||||
.tiny-ma0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.tiny-pan,
|
||||
.tiny-pa0 {
|
||||
padding: 0 !important;
|
||||
}
|
||||
```
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
# Styles d'impression
|
||||
|
||||
KNACSS impose une mise en forme d'impression par défaut, à savoir :
|
||||
|
||||
- suppression des ombrages de boîte et de texte
|
||||
- largeur automatique à la page (body)
|
||||
|
||||
```css
|
||||
* {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
body {
|
||||
width: auto;
|
||||
margin: auto;
|
||||
font-family: serif;
|
||||
font-size: 12pt;
|
||||
}
|
||||
```
|
||||
|
||||
KNACSS gère également les sauts de pages, les lignes veuves et orphelines :
|
||||
|
||||
```css
|
||||
/* 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;
|
||||
}
|
||||
```
|
||||
|
||||
Une classe spécifique permet d'afficher ou de masquer du contenu sur imprimante :
|
||||
|
||||
```css
|
||||
.print {
|
||||
display: block;
|
||||
}
|
||||
.no-print {
|
||||
display: none;
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
# Divers
|
||||
|
||||
La feuille de style "fourre-tout" de KNACSS, où l'on retrouve des règles pratiques dans certains contextes, mais pas suffisamment universelles pour être appliquées par défaut dans un framework.
|
||||
|
||||
## Liens d'évitement
|
||||
|
||||
Les [liens d'évitement](http://www.alsacreations.com/tuto/lire/572-Les-liens-d-evitement.html) sont prévus pour faciliter la navigation au clavier, ils sont indispensable dans une optique de parfaite accessibilité.
|
||||
|
||||
KNACSS propose des styles par défaut pour ces liens : masqués au départ, ils deviennent visibles lorsque la touche `tab` est utilisée.
|
||||
|
||||
```css
|
||||
.skip-links {
|
||||
position: absolute;
|
||||
}
|
||||
.skip-links a {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
padding: 0.5em;
|
||||
background: black;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
.skip-links a:focus {
|
||||
position: static;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
}
|
||||
```
|
||||
|
||||
## Césures
|
||||
|
||||
KNACSS gère automatiquement les césures et les mots longs dès lors que le point de rupture "$tiny" est atteint.
|
||||
|
||||
```
|
||||
// hyphens on tiny screens
|
||||
@media (max-width: $tiny) {
|
||||
/* you shall not pass */
|
||||
div,
|
||||
textarea,
|
||||
table,
|
||||
td,
|
||||
th,
|
||||
code,
|
||||
pre,
|
||||
samp {
|
||||
word-wrap: break-word;
|
||||
hyphens: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// use .no-wrapping to disallow hyphens on tiny screens
|
||||
@media (max-width: $tiny) {
|
||||
.no-wrapping {
|
||||
word-wrap: normal;
|
||||
hyphens: manual;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
# Décorations diverses
|
||||
|
||||
Dans cette feuille de style, KNACSS apporte un minimum de décoration à divers éléments habituels.
|
||||
Il ne s'agit pas d'un "reset" mais bien d'une couche de design qu'il n'est bien entendu pas du tout indispensable de conserver.
|
||||
|
||||
- les élements de code (`code`, `pre`)
|
||||
- le surlignement (`mark`)
|
||||
- les contenus en exposant ou en indice (`sup`, `sub`)
|
||||
- les citations (`q`, `blockquote`)
|
||||
- les séparateurs (`hr`)
|
||||
- les tableaux de données
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
# Styles WordPress
|
||||
|
||||
Cette feuille de style, exclusivement dédiée au CMS WordPress, constitue en un "reset" de base pour cet outil que nous employons fréquemment au sein de l'agence Alsacréations.fr.
|
||||
|
||||
C'est Geoffrey Crofte qui a conçu ce fichier de bonnes pratiques (basée sur un socle proposé par Automattic), n'hésitez pas à le contacter sur son site perso [CreativeJuiz](http://www.creativejuiz.fr/) si vous avez la moindre question à son propos.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 142 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
17
gulpfile.js
17
gulpfile.js
|
|
@ -5,8 +5,7 @@ var gulp = require('gulp');
|
|||
var sass = require('gulp-sass');
|
||||
var concat = require('gulp-concat');
|
||||
var rename = require('gulp-rename');
|
||||
var minifycss = require('gulp-minify-css');
|
||||
// var sourcemaps = require('gulp-sourcemaps');
|
||||
var minifycss = require('gulp-clean-css');
|
||||
var autoprefixer = require('gulp-autoprefixer');
|
||||
|
||||
|
||||
|
|
@ -20,16 +19,20 @@ gulp.task('css', function () {
|
|||
.pipe(rename('knacss-unminified.css'))
|
||||
.pipe(gulp.dest('./css/'))
|
||||
.pipe(rename('knacss.css'))
|
||||
//.pipe(sourcemaps.init())
|
||||
.pipe(minifycss())
|
||||
//.pipe(sourcemaps.write('.', {includeContent: false}))
|
||||
.pipe(gulp.dest('./css/'));
|
||||
});
|
||||
|
||||
gulp.task('grillade', function() {
|
||||
return gulp.src(['./sass/_config/_breakpoints.scss', './sass/grids/_grillade.scss'])
|
||||
.pipe(concat('grillade.scss'))
|
||||
.pipe(gulp.dest('./css/'))
|
||||
return gulp.src('./sass/components/grillade-grid.scss')
|
||||
.pipe(sass())
|
||||
.pipe(autoprefixer())
|
||||
.pipe(minifycss())
|
||||
.pipe(gulp.dest('./css/'));
|
||||
});
|
||||
|
||||
gulp.task('grillade-flex', function() {
|
||||
return gulp.src('./sass/components/grillade-flex.scss')
|
||||
.pipe(sass())
|
||||
.pipe(autoprefixer())
|
||||
.pipe(minifycss())
|
||||
|
|
|
|||
|
|
@ -32,9 +32,8 @@
|
|||
"gulp-rename": "latest",
|
||||
"gulp-sass": "latest",
|
||||
"gulp-concat": "latest",
|
||||
"gulp-minify-css": "latest",
|
||||
"gulp-autoprefixer": "latest",
|
||||
"gulp-sourcemaps": "latest"
|
||||
"gulp-clean-css": "latest",
|
||||
"gulp-autoprefixer": "latest"
|
||||
},
|
||||
"engines": {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
// Responsive breakpoints variables
|
||||
|
||||
// Warning : you should use your own values, regardless of the devices
|
||||
// Best practise : (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;
|
||||
|
|
@ -1,3 +1,27 @@
|
|||
// 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) {
|
||||
@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: (
|
||||
|
|
|
|||
|
|
@ -1,61 +1,211 @@
|
|||
// Config file and project variables
|
||||
|
||||
// tiny font sizes (mobile first)
|
||||
$base-font-size : 1.4rem !default; // ex. 1.4rem would be "14px" equivalent
|
||||
$line-height : 1.4 !default;
|
||||
$h1-size : 2.8rem !default; // equiv "28px"
|
||||
$h2-size : 2.4rem !default; // equiv "24px"
|
||||
$h3-size : 2.0rem !default; // equiv "20px"
|
||||
$h4-size : 1.8rem !default; // equiv "18px"
|
||||
$h5-size : 1.6rem !default; // equiv "16px"
|
||||
$h6-size : 1.4rem !default; // equiv "14px"
|
||||
// ----------------
|
||||
// Breakpoints zone
|
||||
// ----------------
|
||||
|
||||
// large font sizes
|
||||
$base-font-size-l : 1.6rem !default; // ex. 1.6rem would be "16px" equivalent
|
||||
$line-height-l : 1.5 !default;
|
||||
$h1-size-l : 3.2rem !default; // equiv "32px"
|
||||
$h2-size-l : 2.8rem !default; // equiv "28px"
|
||||
$h3-size-l : 2.4rem !default; // equiv "24px"
|
||||
$h4-size-l : 2.0rem !default; // equiv "20px"
|
||||
$h5-size-l : 1.8rem !default; // equiv "18px"
|
||||
$h6-size-l : 1.6rem !default; // equiv "16px"
|
||||
// Warning: you should use your own values, regardless of the devices
|
||||
// Best practise 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;
|
||||
|
||||
// font stacks
|
||||
$font-stack-common : -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif !default; // system font stack
|
||||
$font-stack-headings : sans-serif !default; // headings font
|
||||
$font-stack-monospace : consolas, courier, monospace !default; // monospace font
|
||||
// ----------
|
||||
// Fonts zone
|
||||
// ----------
|
||||
|
||||
// color scheme
|
||||
$color1 : #000 !default;
|
||||
$color2 : #fff !default;
|
||||
$color3 : #333 !default;
|
||||
$color4 : #000 !default;
|
||||
$color5 : #6FA939 !default;
|
||||
// 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
|
||||
|
||||
// colors used in project
|
||||
$color-base : $color1;
|
||||
$color-link : $color3;
|
||||
$background-base : $color2;
|
||||
// Font sizes (1.6rem value is "16px" equivalent)
|
||||
$font-size-base : 1.6rem !default;
|
||||
|
||||
// If you don't want any effect on focused/hovered links,
|
||||
// comment variable below or make it equal to either $color-link or false or null
|
||||
$color-link-hover: $color4;
|
||||
$brand-primary: $color5;
|
||||
$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;
|
||||
|
||||
// spacings (choose unit you prefer)
|
||||
$tiny-value : .5rem !default; // tiny value for margins / paddings
|
||||
$tiny-plus-value : .7rem !default; // tiny+ value for margins / paddings
|
||||
$small-value : 1rem !default; // small value for margins / paddings
|
||||
$small-plus-value : 1.5rem !default; // small+ value for margins / paddings
|
||||
$medium-value : 2rem !default; // medium value for margins / paddings
|
||||
$medium-plus-value : 3rem !default; // medium+ value for margins / paddings
|
||||
$large-value : 4rem !default; // large value for margins / paddings
|
||||
$large-plus-value : 6rem !default; // large value for margins / paddings
|
||||
$extra-large-value : 8rem !default; // extra large value for margins / paddings
|
||||
$extra-large-plus-value : 12rem !default; // extra large value for margins / paddings
|
||||
$ultra-large-value : 16rem !default; // ultra large value for margins / paddings
|
||||
$ultra-large-plus-value : 20rem !default; // ultra large value for margins / paddings
|
||||
// Default margin-bottom
|
||||
$margin-bottom-base : 1rem !default;
|
||||
$headings-margin-bottom : $margin-bottom-base /2 !default;
|
||||
$paragraph-margin-bottom: $margin-bottom-base !default;
|
||||
|
||||
//kna-namespace (default : null)
|
||||
$kna-namespace: null !default;
|
||||
// Font weights
|
||||
$weight-light : 200 !default;
|
||||
$weight-book : 300 !default;
|
||||
$weight-regular : 400 !default;
|
||||
$weight-medium : 500 !default;
|
||||
$weight-bold : 700 !default;
|
||||
|
||||
// ------------
|
||||
// Spacing zone
|
||||
// ------------
|
||||
|
||||
// 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;
|
||||
$color-primary : $blue-500;
|
||||
$color-success : $green-500;
|
||||
$color-info : $blue-300;
|
||||
$color-warning : $orange-500;
|
||||
$color-danger : $red-500;
|
||||
$color-inverse : $gray-800;
|
||||
$color-ghost : transparent;
|
||||
$color-muted : $gray-200;
|
||||
|
||||
$color-base : $gray-900;
|
||||
$background-base : $white;
|
||||
|
||||
$forms-color : $gray-800;
|
||||
|
||||
// ---------------
|
||||
// Components zone
|
||||
// ---------------
|
||||
|
||||
// Component: links
|
||||
$link-color : $gray-800;
|
||||
$link-color-hover : darken($link-color, 15%);
|
||||
$link-decoration : none;
|
||||
$link-decoration-hover : underline;
|
||||
|
||||
// Global border-radius
|
||||
$border-radius: 0 !default;
|
||||
|
||||
// Component: quotes
|
||||
$quote-color : $gray-200;
|
||||
|
||||
// Component: arrows
|
||||
$arrow-color : $black;
|
||||
|
||||
// Components: checkboxes, radios, switches
|
||||
$checkbox-color : $gray-800;
|
||||
$checkbox-size : 2rem;
|
||||
$checkbox-border-radius : 4px;
|
||||
$switch-color : $gray-800;
|
||||
$switch-size : 2rem;
|
||||
$switch-border-radius : 3em;
|
||||
|
||||
// Component: tables
|
||||
$table-border : $gray-500;
|
||||
$table-caption-color : $gray-800;
|
||||
$table-background : transparent;
|
||||
$table-head-color : $color-base;
|
||||
$table-head-background : transparent;
|
||||
$table-footer-color : $color-base;
|
||||
$table-footer-background : transparent;
|
||||
|
||||
// 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, $white, none),
|
||||
(warning, $color-warning, $white, 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;
|
||||
$tabs-active-border : $gray-800;
|
||||
$tabs-color : $color-base;
|
||||
$tabs-active-color : $gray-800;
|
||||
$tabs-background : transparent;
|
||||
$tabs-active-background : transparent;
|
||||
$tabs-border-radius : 0;
|
||||
|
||||
// Component: nav burger button
|
||||
$burger-color : $gray-800;
|
||||
$burger-background : transparent;
|
||||
$burger-hover-background : transparent;
|
||||
$burger-size : 2.6rem;
|
||||
$burger-weight : 5px; // size of stripes
|
||||
$burger-padding : 0;
|
||||
|
|
|
|||
266
sass/_library/_base.scss
Normal file
266
sass/_library/_base.scss
Normal file
|
|
@ -0,0 +1,266 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Base (basic styles) */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* switching to border-box model for all elements */
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
/* avoid min-width: auto on flex and grid children */
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
/* set base font-size to equiv "10px", which is adapted to rem unit */
|
||||
font-size: 62.5%;
|
||||
/* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
|
||||
font-size: calc(1em * 0.625);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
@include font-size(base);
|
||||
background-color: $background-base;
|
||||
color: $color-base;
|
||||
font-family: $font-family-base;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: $link-color;
|
||||
text-decoration: $link-decoration;
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $link-color-hover;
|
||||
text-decoration: $link-decoration-hover;
|
||||
}
|
||||
}
|
||||
|
||||
/* Headings */
|
||||
h1, .h1-like {
|
||||
@include font-size(h1);
|
||||
@if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
|
||||
font-family: $font-family-headings;
|
||||
}
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
h2, .h2-like {
|
||||
@include font-size(h2);
|
||||
@if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
|
||||
font-family: $font-family-headings;
|
||||
}
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
h3, .h3-like {
|
||||
@include font-size(h3);
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
h4, .h4-like {
|
||||
@include font-size(h4);
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
h5, .h5-like {
|
||||
@include font-size(h5);
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
h6, .h6-like {
|
||||
@include font-size(h6);
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
/* Vertical rythm */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
dd {
|
||||
margin-top: 0;
|
||||
margin-bottom: $headings-margin-bottom;
|
||||
}
|
||||
|
||||
p,
|
||||
address,
|
||||
ol,
|
||||
ul,
|
||||
dl,
|
||||
blockquote,
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: $paragraph-margin-bottom;
|
||||
}
|
||||
|
||||
/* Avoid margins on nested elements */
|
||||
li p,
|
||||
li .p-like,
|
||||
li ul,
|
||||
li ol,
|
||||
ol ol,
|
||||
ul ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Max values */
|
||||
img,
|
||||
table,
|
||||
td,
|
||||
blockquote,
|
||||
code,
|
||||
pre,
|
||||
textarea,
|
||||
input,
|
||||
video,
|
||||
svg {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Styling elements */
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
em,
|
||||
.italic,
|
||||
address,
|
||||
cite,
|
||||
i,
|
||||
var {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
mark {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding: 0 2px;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
pre {
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 2px 4px;
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
color: #b11;
|
||||
}
|
||||
|
||||
pre code {
|
||||
padding: 0;
|
||||
background: none;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
sup,
|
||||
sub {
|
||||
vertical-align: 0;
|
||||
}
|
||||
|
||||
sup {
|
||||
bottom: 1ex;
|
||||
}
|
||||
|
||||
sub {
|
||||
top: 0.5ex;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
position: relative;
|
||||
padding-left: 3em;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
blockquote::before {
|
||||
content: "\201C";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
font-family: georgia, serif;
|
||||
font-size: 5em;
|
||||
height: .4em;
|
||||
line-height: .9;
|
||||
color: $quote-color;
|
||||
}
|
||||
|
||||
blockquote > footer {
|
||||
margin-top: .75em;
|
||||
font-size: 0.9em;
|
||||
color: rgba(0, 0, 0, .7);
|
||||
|
||||
&::before {
|
||||
content: "\2014 \0020";
|
||||
}
|
||||
}
|
||||
|
||||
q {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
q,
|
||||
.q {
|
||||
quotes: "“\00a0" "\00a0”";
|
||||
|
||||
&:lang(fr) {
|
||||
quotes: "«\00a0" "\00a0»";
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
clear: both;
|
||||
height: 1px;
|
||||
margin: 1em 0 2em;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: #ccc;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
figure {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
code,
|
||||
pre,
|
||||
samp,
|
||||
kbd {
|
||||
white-space: pre-wrap;
|
||||
font-family: $font-family-monospace;
|
||||
line-height: normal;
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Global Layout */
|
||||
/* ==Global Micro Layout */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* module, gains superpower "BFC" Block Formating Context */
|
||||
|
|
@ -24,56 +24,56 @@
|
|||
}
|
||||
|
||||
/* simple blocks alignment */
|
||||
.#{$kna-namespace}left {
|
||||
.left {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}right {
|
||||
.right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}center {
|
||||
.center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* text and contents alignment */
|
||||
.#{$kna-namespace}txtleft {
|
||||
.txtleft {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}txtright {
|
||||
.txtright {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}txtcenter {
|
||||
.txtcenter {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* floating elements */
|
||||
.#{$kna-namespace}fl {
|
||||
.fl {
|
||||
float: left;
|
||||
}
|
||||
|
||||
img.#{$kna-namespace}fl {
|
||||
margin-right: $small-value;
|
||||
img.fl {
|
||||
margin-right: $spacer-small;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}fr {
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
|
||||
img.#{$kna-namespace}fr {
|
||||
margin-left: $small-value;
|
||||
img.fr {
|
||||
margin-left: $spacer-small;
|
||||
}
|
||||
|
||||
img.#{$kna-namespace}fl,
|
||||
img.#{$kna-namespace}fr {
|
||||
margin-bottom: $tiny-value;
|
||||
img.fl,
|
||||
img.fr {
|
||||
margin-bottom: $spacer-tiny;
|
||||
}
|
||||
|
||||
/* inline-block */
|
||||
.#{$kna-namespace}inbl {
|
||||
.inbl {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
|
@ -82,45 +82,60 @@ img.#{$kna-namespace}fr {
|
|||
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
||||
*/
|
||||
|
||||
[class*="#{$kna-namespace}flex-container"],
|
||||
.#{$kna-namespace}flex-container,
|
||||
.flex-container,
|
||||
.d-flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}flex-container-h,
|
||||
.flex-container--row,
|
||||
.flex-row {
|
||||
@extend .flex-container;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}flex-container-v,
|
||||
.flex-container--column,
|
||||
.flex-column {
|
||||
@extend .flex-container;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}flex-item-fluid {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
.flex-container--row-reverse,
|
||||
.flex-row-reverse {
|
||||
@extend .flex-container;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}flex-item-first,
|
||||
.#{$kna-namespace}item-first {
|
||||
.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;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}flex-item-medium,
|
||||
.#{$kna-namespace}item-medium {
|
||||
.flex-item-medium,
|
||||
.item-medium {
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}flex-item-last,
|
||||
.#{$kna-namespace}item-last {
|
||||
.flex-item-last,
|
||||
.item-last {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}flex-item-center,
|
||||
.#{$kna-namespace}item-center,
|
||||
.flex-item-center,
|
||||
.item-center,
|
||||
.mr-auto {
|
||||
margin: auto;
|
||||
}
|
||||
|
|
@ -1,28 +1,7 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Misc (skip links, hyphens) */
|
||||
/* ==Misc */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* styling skip links */
|
||||
.#{$kna-namespace}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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// hyphens on tiny screens
|
||||
@media (max-width: ($small - 1)) {
|
||||
/* you shall not pass */
|
||||
|
|
@ -17,37 +17,38 @@
|
|||
}
|
||||
|
||||
p,
|
||||
.#{$kna-namespace}p-like,
|
||||
.p-like,
|
||||
h1,
|
||||
.#{$kna-namespace}h1-like,
|
||||
.h1-like,
|
||||
h2,
|
||||
.#{$kna-namespace}h2-like,
|
||||
.h2-like,
|
||||
h3,
|
||||
.#{$kna-namespace}h3-like,
|
||||
.h3-like,
|
||||
h4,
|
||||
.#{$kna-namespace}h4-like,
|
||||
.h4-like,
|
||||
h5,
|
||||
.#{$kna-namespace}h5-like,
|
||||
.h5-like,
|
||||
h6,
|
||||
.#{$kna-namespace}h6-like,
|
||||
.h6-like,
|
||||
blockquote,
|
||||
label,
|
||||
ul,
|
||||
ol {
|
||||
color: #000;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}print {
|
||||
.print {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}no-print {
|
||||
.no-print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* no orphans, no widows */
|
||||
p,
|
||||
.#{$kna-namespace}p-like,
|
||||
.p-like,
|
||||
blockquote {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
|
|
@ -69,11 +70,11 @@
|
|||
|
||||
/* no breaks after these elements */
|
||||
h1,
|
||||
.#{$kna-namespace}h1-like,
|
||||
.h1-like,
|
||||
h2,
|
||||
.#{$kna-namespace}h2-like,
|
||||
.h2-like,
|
||||
h3,
|
||||
.#{$kna-namespace}h3-like,
|
||||
.h3-like,
|
||||
caption {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
|
@ -8,47 +8,47 @@
|
|||
@media (min-width: $large) {
|
||||
|
||||
/* layouts for large screens */
|
||||
.#{$kna-namespace}large-hidden {
|
||||
.large-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}large-visible {
|
||||
.large-visible {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}large-no-float {
|
||||
.large-no-float {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}large-inbl {
|
||||
.large-inbl {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* widths for large screens */
|
||||
.#{$kna-namespace}large-w25 {
|
||||
.large-w25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}large-w33 {
|
||||
.large-w33 {
|
||||
width: 33.333333% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}large-w50 {
|
||||
.large-w50 {
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}large-w66 {
|
||||
.large-w66 {
|
||||
width: 66.666666% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}large-w75 {
|
||||
.large-w75 {
|
||||
width: 75% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}large-w100,
|
||||
.#{$kna-namespace}large-wauto {
|
||||
.large-w100,
|
||||
.large-wauto {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
clear: none !important;
|
||||
|
|
@ -59,8 +59,8 @@
|
|||
}
|
||||
|
||||
/* margins for large screens */
|
||||
.#{$kna-namespace}large-man,
|
||||
.#{$kna-namespace}large-ma0 {
|
||||
.large-man,
|
||||
.large-ma0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -71,47 +71,47 @@
|
|||
@media (min-width: $medium) and (max-width: ($large - 1)) {
|
||||
|
||||
/* layouts for medium screens */
|
||||
.#{$kna-namespace}medium-hidden {
|
||||
.medium-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}medium-visible {
|
||||
.medium-visible {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}medium-no-float {
|
||||
.medium-no-float {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}medium-inbl {
|
||||
.medium-inbl {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* widths for medium screens */
|
||||
.#{$kna-namespace}medium-w25 {
|
||||
.medium-w25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}medium-w33 {
|
||||
.medium-w33 {
|
||||
width: 33.333333% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}medium-w50 {
|
||||
.medium-w50 {
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}medium-w66 {
|
||||
.medium-w66 {
|
||||
width: 66.666666% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}medium-w75 {
|
||||
.medium-w75 {
|
||||
width: 75% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}medium-w100,
|
||||
.#{$kna-namespace}medium-wauto {
|
||||
.medium-w100,
|
||||
.medium-wauto {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
clear: none !important;
|
||||
|
|
@ -122,8 +122,8 @@
|
|||
}
|
||||
|
||||
/* margins for medium screens */
|
||||
.#{$kna-namespace}medium-man,
|
||||
.#{$kna-namespace}medium-ma0 {
|
||||
.medium-man,
|
||||
.medium-ma0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -134,47 +134,47 @@
|
|||
@media (min-width: $small) and (max-width: ($medium - 1)) {
|
||||
|
||||
/* layouts for small screens */
|
||||
.#{$kna-namespace}small-hidden {
|
||||
.small-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}small-visible {
|
||||
.small-visible {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}small-no-float {
|
||||
.small-no-float {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}small-inbl {
|
||||
.small-inbl {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* widths for small screens */
|
||||
.#{$kna-namespace}small-w25 {
|
||||
.small-w25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}small-w33 {
|
||||
.small-w33 {
|
||||
width: 33.333333% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}small-w50 {
|
||||
.small-w50 {
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}small-w66 {
|
||||
.small-w66 {
|
||||
width: 66.666666% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}small-w75 {
|
||||
.small-w75 {
|
||||
width: 75% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}small-w100,
|
||||
.#{$kna-namespace}small-wauto {
|
||||
.small-w100,
|
||||
.small-wauto {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
clear: none !important;
|
||||
|
|
@ -185,13 +185,13 @@
|
|||
}
|
||||
|
||||
/* margins for small screens */
|
||||
.#{$kna-namespace}small-man,
|
||||
.#{$kna-namespace}small-ma0 {
|
||||
.small-man,
|
||||
.small-ma0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}small-pan,
|
||||
.#{$kna-namespace}small-pa0 {
|
||||
.small-pan,
|
||||
.small-pa0 {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
|
|
@ -203,8 +203,8 @@
|
|||
@media (max-width: $small - 1) {
|
||||
|
||||
/* quick small resolution reset */
|
||||
.#{$kna-namespace}mod,
|
||||
.#{$kna-namespace}col,
|
||||
.mod,
|
||||
.col,
|
||||
fieldset {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
|
|
@ -215,52 +215,52 @@
|
|||
border: 0;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}flex-container {
|
||||
.flex-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* layouts for tiny screens */
|
||||
.#{$kna-namespace}tiny-hidden {
|
||||
.tiny-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}tiny-visible {
|
||||
.tiny-visible {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}tiny-no-float {
|
||||
.tiny-no-float {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}tiny-inbl {
|
||||
.tiny-inbl {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* widths for tiny screens */
|
||||
.#{$kna-namespace}tiny-w25 {
|
||||
.tiny-w25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}tiny-w33 {
|
||||
.tiny-w33 {
|
||||
width: 33.333333% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}tiny-w50 {
|
||||
.tiny-w50 {
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}tiny-w66 {
|
||||
.tiny-w66 {
|
||||
width: 66.666666% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}tiny-w75 {
|
||||
.tiny-w75 {
|
||||
width: 75% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}tiny-w100,
|
||||
.#{$kna-namespace}tiny-wauto {
|
||||
.tiny-w100,
|
||||
.tiny-wauto {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
clear: none !important;
|
||||
|
|
@ -271,13 +271,13 @@
|
|||
}
|
||||
|
||||
/* margins for tiny screens */
|
||||
.#{$kna-namespace}tiny-man,
|
||||
.#{$kna-namespace}tiny-ma0 {
|
||||
.tiny-man,
|
||||
.tiny-ma0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}tiny-pan,
|
||||
.#{$kna-namespace}tiny-pa0 {
|
||||
.tiny-pan,
|
||||
.tiny-pa0 {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
331
sass/_library/_utilities.scss
Normal file
331
sass/_library/_utilities.scss
Normal file
|
|
@ -0,0 +1,331 @@
|
|||
/* ---------------------------------- */
|
||||
/* ==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;
|
||||
}
|
||||
|
||||
/* 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 */
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.color--inverse {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
/* 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,3 +1,9 @@
|
|||
/* ---------------------------------- */
|
||||
/* ==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
|
||||
|
|
@ -9,10 +15,6 @@ $medium: 768px !default;
|
|||
$large: 992px !default;
|
||||
$extra-large: 1200px !default;
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* ==Grillade : Simple Grid System */
|
||||
/* ---------------------------------- */
|
||||
/* Doc : http://grillade.knacss.com */
|
||||
// gutter values for grid layouts. Unit can be: %, px, em, rem
|
||||
$grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
|
||||
// IEfixing, see
|
||||
95
sass/_library/grillade-grid.scss
Normal file
95
sass/_library/grillade-grid.scss
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
/* --------------------------------------- */
|
||||
/* ==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;
|
||||
$small: 576px !default;
|
||||
$medium: 768px !default;
|
||||
$large: 992px !default;
|
||||
|
||||
|
||||
[class*=" grid-"],
|
||||
[class^="grid-"] {
|
||||
@media (min-width: $tiny) {
|
||||
display: grid;
|
||||
grid-auto-flow: dense;
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// grid constructor (.grid-2 to .grid-12)
|
||||
@for $i from 1 through 12 {
|
||||
[class*="grid-#{$i}"] {
|
||||
grid-template-columns: repeat(#{$i}, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
// grid items constructor (.col-1 to .col-12, .row-1 to .row-12)
|
||||
@for $i from 1 through 12 {
|
||||
[class*="col-#{$i}"] {
|
||||
grid-column: auto / span #{$i};
|
||||
}
|
||||
|
||||
[class*="row-#{$i}"] {
|
||||
grid-row: auto / span #{$i};
|
||||
}
|
||||
}
|
||||
|
||||
/* intermediate breakpoints */
|
||||
// -small-X suffix means "X columns when < medium screen"
|
||||
// example : .grid-4-small-2 will be 1 column (< tiny) then 2 columns (< medium) then 4 columns
|
||||
@media (min-width: $tiny) and (max-width: ($medium - 1)) {
|
||||
@for $i from 1 through 4{
|
||||
[class*="grid-"][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 order
|
||||
.item-first {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.item-last {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
// grid offset
|
||||
.grid-offset {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// spanning all collumns or rows
|
||||
.col-all {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.row-all {
|
||||
grid-row: 1 / -1;
|
||||
}
|
||||
|
|
@ -1,461 +0,0 @@
|
|||
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/**
|
||||
* 1. Change the default font family in all browsers (opinionated).
|
||||
* 2. Correct the line height in all browsers.
|
||||
* 3. Prevent adjustments of font size after orientation changes in
|
||||
* IE on Windows Phone and in iOS.
|
||||
*/
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
line-height: 1.15; /* 2 */
|
||||
-ms-text-size-adjust: 100%; /* 3 */
|
||||
-webkit-text-size-adjust: 100%; /* 3 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
footer,
|
||||
header,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in IE.
|
||||
*/
|
||||
|
||||
figcaption,
|
||||
figure,
|
||||
main { /* 1 */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct margin in IE 8.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Remove the gray background on active links in IE 10.
|
||||
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent; /* 1 */
|
||||
-webkit-text-decoration-skip: objects; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the outline on focused links when they are also active or hovered
|
||||
* in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Firefox 39-.
|
||||
* 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 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font style in Android 4.3-.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct background and color in IE 9-.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background-color: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
audio,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in iOS 4-7.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10-.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the overflow in IE.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers (opinionated).
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
* controls in Android 4.
|
||||
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
html [type="button"], /* 1 */
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
|
||||
/**
|
||||
* Change the border, margin, and padding in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct display in IE 9-.
|
||||
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10-.
|
||||
* 2. Remove the padding in IE 10-.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in Edge, IE, and Firefox.
|
||||
*/
|
||||
|
||||
details, /* 1 */
|
||||
menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Scripting
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hidden
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10-.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
335
sass/_vendor/_reboot.css
Normal file
335
sass/_vendor/_reboot.css
Normal file
|
|
@ -0,0 +1,335 @@
|
|||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.15;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-ms-overflow-style: scrollbar;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
@-ms-viewport {
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #212529;
|
||||
text-align: left;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
[tabindex="-1"]:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
abbr[title],
|
||||
abbr[data-original-title] {
|
||||
text-decoration: underline;
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: .5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -.5em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
-webkit-text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #0056b3;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]):focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
-ms-overflow-style: scrollbar;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
[role="button"],
|
||||
input:not([type="range"]),
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea {
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
color: #868e96;
|
||||
text-align: left;
|
||||
caption-side: bottom;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
button,
|
||||
html [type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
-webkit-appearance: listbox;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: .5rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
outline-offset: -2px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
/*# sourceMappingURL=bootstrap-reboot.css.map */
|
||||
53
sass/components/_alerts.scss
Normal file
53
sass/components/_alerts.scss
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
/* ----------------------------- */
|
||||
/* ==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;
|
||||
}
|
||||
}
|
||||
34
sass/components/_arrows.scss
Normal file
34
sass/components/_arrows.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
/* ----------------------------- */
|
||||
/* ==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");
|
||||
}
|
||||
27
sass/components/_autogrid.scss
Normal file
27
sass/components/_autogrid.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Autogrid object */
|
||||
/* ----------------------------- */
|
||||
/* recommanded HTML : <div class="autogrid">... some elements ...</div> */
|
||||
/* see https://codepen.io/raphaelgoetter/pen/zzwxEE */
|
||||
|
||||
.autogrid,
|
||||
.grid {
|
||||
@media (min-width: $tiny) {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-column: 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
50
sass/components/_badges.scss
Normal file
50
sass/components/_badges.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
/* ----------------------------- */
|
||||
/* ==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;
|
||||
}
|
||||
}
|
||||
157
sass/components/_buttons.scss
Normal file
157
sass/components/_buttons.scss
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Buttons */
|
||||
/* ----------------------------- */
|
||||
/* 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;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.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
|
||||
// active it with a JS toggle-class to .is-active
|
||||
// recommanded 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: flex;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
97
sass/components/_checkbox.scss
Normal file
97
sass/components/_checkbox.scss
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Checkbox, radio, switch */
|
||||
/* ----------------------------- */
|
||||
/* use .checkbox class on input type=checkbox */
|
||||
/* recommanded HTML : <input type="checkbox" class="checkbox" id="c1"><label for="c1">click here</label> */
|
||||
/* use .radio class on input type=radio */
|
||||
/* recommanded 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>
|
||||
|
||||
// common styles
|
||||
.checkbox {
|
||||
border-radius: $checkbox-border-radius;
|
||||
}
|
||||
|
||||
.switch {
|
||||
border-radius: $switch-border-radius;
|
||||
}
|
||||
|
||||
.radio {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.switch,
|
||||
.checkbox,
|
||||
.radio {
|
||||
appearance: none;
|
||||
vertical-align: text-bottom;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
box-shadow: inset 0 0 0 1px $checkbox-color;
|
||||
background: #fff;
|
||||
|
||||
~ 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: 60%;
|
||||
box-shadow: inset -#{$switch-size} 0 0 $switch-color, inset 0 0 0 1px $switch-color;
|
||||
transition: box-shadow .15s;
|
||||
&::before, &::after {
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
&::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;
|
||||
transition: background-color .15s;
|
||||
&: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-color;
|
||||
}
|
||||
}
|
||||
|
||||
// radio styling
|
||||
.radio {
|
||||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
transition: background-color .15s;
|
||||
&: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: 80% 80%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: $checkbox-color;
|
||||
}
|
||||
}
|
||||
110
sass/components/_forms.scss
Normal file
110
sass/components/_forms.scss
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Forms */
|
||||
/* ----------------------------- */
|
||||
/* thanks to HTML5boilerplate and https://shoelace.style/ */
|
||||
|
||||
/* forms items */
|
||||
form,
|
||||
fieldset {
|
||||
border: none;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding: $spacer-medium;
|
||||
|
||||
& legend {
|
||||
padding: 0 $spacer-tiny;
|
||||
border: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
[type="color"],
|
||||
[type="date"],
|
||||
[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 {
|
||||
white-space: nowrap;
|
||||
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: normal;
|
||||
}
|
||||
|
||||
/* '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;
|
||||
}
|
||||
|
||||
progress {
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
25
sass/components/_media.scss
Normal file
25
sass/components/_media.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Media object */
|
||||
/* ----------------------------- */
|
||||
/* recommanded 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
25
sass/components/_skip-links.scss
Normal file
25
sass/components/_skip-links.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
/* ----------------------------- */
|
||||
/* ==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;
|
||||
}
|
||||
}
|
||||
}
|
||||
51
sass/components/_tables.scss
Normal file
51
sass/components/_tables.scss
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
/* ----------------------------- */
|
||||
/* ==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;
|
||||
}
|
||||
53
sass/components/_tabs.scss
Normal file
53
sass/components/_tabs.scss
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
/* ----------------------------- */
|
||||
/* ==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;
|
||||
}
|
||||
}
|
||||
50
sass/components/_tags.scss
Normal file
50
sass/components/_tags.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
/* ----------------------------- */
|
||||
/* ==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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,132 +0,0 @@
|
|||
/* ---------------------------------- */
|
||||
/* ==Grillade : Simple Grid System */
|
||||
/* ---------------------------------- */
|
||||
/* Doc : http://grillade.knacss.com */
|
||||
// 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*=" grid-"],
|
||||
[class^="grid-"] {
|
||||
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) {
|
||||
.grid,
|
||||
.grid--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 12 {
|
||||
[class*="grid-#{$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*="grid-"][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,5 +1,5 @@
|
|||
/*!
|
||||
* www.KNACSS.com v6.1.2 (21 juin 2017) @author: Alsacreations, Raphael Goetter
|
||||
* www.KNACSS.com v7.0.0 (??? 2017) @author: Alsacreations, Raphael Goetter
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
|
||||
|
|
@ -7,60 +7,62 @@
|
|||
/* ==Table Of Content */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* 1- Normalize (basic reset) */
|
||||
/* 2- Base (basic styles) */
|
||||
/* 3- Print (print quick reset) */
|
||||
/* 4- Stylings (minor stylings) */
|
||||
/* 5- Misc (skip links, hyphens) */
|
||||
/* 6- Tables (data tables consistency) */
|
||||
/* 7- Forms (forms consistency) */
|
||||
/* 8- Media object */
|
||||
/* 9- Autogrid object */
|
||||
/* 10- Global Layout (alignment, modules, positionning) */
|
||||
/* 11- Helpers (width and spacers helpers) */
|
||||
/* (12- WordPress reset (disabled by default)) */
|
||||
/* 13- Responsive (Responsive Web Design helpers) */
|
||||
/* 14- Grid Layout (grillade) */
|
||||
/*
|
||||
1- Reboot (basic reset)
|
||||
2- Libraries :
|
||||
- Base
|
||||
- Print
|
||||
- Misc (hyphens)
|
||||
- Layout (alignment, modules, positionning)
|
||||
- Utilities (width and spacers helpers)
|
||||
- Responsive helpers
|
||||
- WordPress reset (disabled by default)
|
||||
- Grillade (Grid System)
|
||||
3- Components :
|
||||
- Media object
|
||||
- Autogrid object
|
||||
- Skip Links for accessibility
|
||||
- Tables
|
||||
- Forms
|
||||
- Buttons
|
||||
- Checkbox
|
||||
- Tabs
|
||||
- Tags
|
||||
- Badges
|
||||
- Alerts
|
||||
*/
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* ==Normalize (basic reset) */
|
||||
/* ---------------------------------- */
|
||||
|
||||
@import "_vendor/_normalize.scss"; // normalize (basic reset)
|
||||
@import "_vendor/_reboot"; // Bootstrap reboot (basic reset)
|
||||
|
||||
// WARNING : you should comment the following @import (variables)
|
||||
// and move variables file from knacss folder to your own project folder!
|
||||
@import "_config/_variables.scss";
|
||||
|
||||
@import "_config/_breakpoints.scss";
|
||||
@import "_config/_mixins.scss";
|
||||
|
||||
// Libraries
|
||||
@import "library/_base.scss"; // basic styles
|
||||
@import "library/_print.scss"; // print quick reset
|
||||
@import "library/_styling.scss"; // minor stylings
|
||||
@import "library/_misc.scss"; // skip links, hyphens
|
||||
@import "library/_tables.scss"; // data tables consistency
|
||||
@import "library/_forms.scss"; // forms consistency
|
||||
// Core Libraries
|
||||
@import "_library/_base.scss"; // basic styles
|
||||
@import "_library/_print.scss"; // print quick reset
|
||||
@import "_library/_misc.scss"; // skip links, hyphens
|
||||
@import "_library/_layout.scss"; // alignment, modules, positionning
|
||||
@import "_library/_utilities.scss"; // width and spacers helpers
|
||||
@import "_library/_responsive.scss"; // Responsive Web Design helpers
|
||||
// @import "_library/_wordpress.scss"; // WordPress reset and basic styles
|
||||
|
||||
// Objects
|
||||
@import "objects/_media.scss"; // media object
|
||||
@import "objects/_autogrid.scss"; // media autogrid
|
||||
// New Grid System by default (Grid Layout). If you prefer old "Flexbox" Grid System, replace file with "_library/grillade-flex.scss"
|
||||
// Note that none of these file is prefixed by an underscore, in order to compile them.
|
||||
@import "_library/grillade-grid.scss"; // grid system with Grid Layout
|
||||
|
||||
// Utilities
|
||||
@import "utilities/_layout.scss"; // alignment, modules, positionning
|
||||
@import "utilities/_helpers.scss"; // width and spacers helpers
|
||||
// @import "utilities/_wordpress.scss"; // WordPress reset and basic styles
|
||||
@import "utilities/_responsive.scss"; // Responsive Web Design helpers
|
||||
|
||||
// Grids
|
||||
@import "grids/_grillade.scss"; // grids
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Own stylesheet */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* Here should go your own CSS styles */
|
||||
// You can also link them with a Sass @import
|
||||
// @import "my-styles";
|
||||
// Components
|
||||
@import "components/_media.scss"; // media object
|
||||
@import "components/_autogrid.scss"; // media autogrid
|
||||
@import "components/_skip-links.scss"; // skip links
|
||||
@import "components/_tables.scss"; // data tables consistency
|
||||
@import "components/_forms.scss"; // forms consistency and styles
|
||||
@import "components/_buttons.scss"; // buttons styles
|
||||
@import "components/_checkbox.scss"; // checkbox, radio, switch styles
|
||||
@import "components/_tabs.scss"; // tabs styles
|
||||
@import "components/_arrows.scss"; // arrows styles
|
||||
@import "components/tags.scss"; // tags styles
|
||||
@import "components/_badges.scss"; // badges styles
|
||||
@import "components/_alerts.scss"; // alerts styles
|
||||
|
|
|
|||
|
|
@ -1,241 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Base (basic styles) */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* switching to border-box model for all elements */
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
html {
|
||||
/* set base font-size to equiv "10px", which is adapted to rem unit */
|
||||
font-size: 62.5%;
|
||||
/* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
|
||||
/* thanks to @guardian, @victorbritopro and @eQRoeil */
|
||||
font-size: calc(1em * 0.625);
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: $base-font-size;
|
||||
@if variable_exists(base-font-size-l) and $base-font-size-l != $base-font-size {
|
||||
@include respond-to("tiny-up") {
|
||||
font-size: $base-font-size-l;
|
||||
}
|
||||
}
|
||||
background-color: $background-base;
|
||||
color: $color-base;
|
||||
font-family: $font-stack-common;
|
||||
line-height: $line-height;
|
||||
@if variable_exists(line-height-l) and $line-height-l != $line-height {
|
||||
@include respond-to("tiny-up") {
|
||||
line-height: $line-height-l;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color-link;
|
||||
|
||||
// No styling on focus/hover if there's no effect. Avoids to then have to
|
||||
// override it countless times. See Issue #232
|
||||
@if variable_exists(color-link-hover) and
|
||||
( null == index( ($color-link, null, false), $color-link-hover) ) {
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $color-link-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
figure {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* font-sizing for content */
|
||||
p,
|
||||
.#{$kna-namespace}p-like,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
blockquote,
|
||||
pre,
|
||||
td,
|
||||
th,
|
||||
label,
|
||||
textarea,
|
||||
caption,
|
||||
details,
|
||||
figure {
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 0;
|
||||
line-height: $line-height;
|
||||
}
|
||||
|
||||
h1, .#{$kna-namespace}h1-like {
|
||||
font-size: $h1-size;
|
||||
@if variable_exists(h1-size-l) and $h1-size-l != $h1-size {
|
||||
@include respond-to("tiny-up") {
|
||||
font-size: $h1-size-l;
|
||||
}
|
||||
}
|
||||
@if variable_exists(font-stack-headings) and $font-stack-headings != $font-stack-common {
|
||||
font-family: $font-stack-headings;
|
||||
}
|
||||
}
|
||||
|
||||
h2, .#{$kna-namespace}h2-like {
|
||||
font-size: $h2-size;
|
||||
@if variable_exists(h2-size-l) and $h2-size-l != $h2-size {
|
||||
@include respond-to("tiny-up") {
|
||||
font-size: $h2-size-l;
|
||||
}
|
||||
}
|
||||
@if variable_exists(font-stack-headings) and $font-stack-headings != $font-stack-common {
|
||||
font-family: $font-stack-headings;
|
||||
}
|
||||
}
|
||||
|
||||
h3, .#{$kna-namespace}h3-like {
|
||||
font-size: $h3-size;
|
||||
@if variable_exists(h3-size-l) and $h3-size-l != $h3-size {
|
||||
@include respond-to("tiny-up") {
|
||||
font-size: $h3-size-l;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h4, .#{$kna-namespace}h4-like {
|
||||
font-size: $h4-size;
|
||||
@if variable_exists(h4-size-l) and $h4-size-l != $h4-size {
|
||||
@include respond-to("tiny-up") {
|
||||
font-size: $h4-size-l;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h5, .#{$kna-namespace}h5-like {
|
||||
font-size: $h5-size;
|
||||
@if variable_exists(h5-size-l) and $h5-size-l != $h5-size {
|
||||
@include respond-to("tiny-up") {
|
||||
font-size: $h5-size-l;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h6, .#{$kna-namespace}h6-like {
|
||||
font-size: $h6-size;
|
||||
@if variable_exists(h6-size-l) and $h6-size-l != $h6-size {
|
||||
@include respond-to("tiny-up") {
|
||||
font-size: $h6-size-l;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* alternate font-sizing */
|
||||
.#{$kna-namespace}smaller {
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}small {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}big {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}bigger {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}biggest {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
code,
|
||||
pre,
|
||||
samp,
|
||||
kbd {
|
||||
/* IE fix */
|
||||
white-space: pre-line;
|
||||
white-space: pre-wrap;
|
||||
font-family: $font-stack-monospace;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
em,
|
||||
.#{$kna-namespace}italic,
|
||||
address,
|
||||
cite,
|
||||
i,
|
||||
var {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* avoid top margins on first content element */
|
||||
p,
|
||||
.#{$kna-namespace}p-like,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
blockquote,
|
||||
pre,
|
||||
h1,
|
||||
.#{$kna-namespace}h1-like,
|
||||
h2,
|
||||
.#{$kna-namespace}h2-like,
|
||||
h3,
|
||||
.#{$kna-namespace}h3-like,
|
||||
h4,
|
||||
.#{$kna-namespace}h4-like,
|
||||
h5,
|
||||
.#{$kna-namespace}h5-like,
|
||||
h6,
|
||||
.#{$kna-namespace}h6-like {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* avoid margins on nested elements */
|
||||
li p,
|
||||
li .#{$kna-namespace}p-like,
|
||||
li ul,
|
||||
li ol {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* max values */
|
||||
img,
|
||||
table,
|
||||
td,
|
||||
blockquote,
|
||||
code,
|
||||
pre,
|
||||
textarea,
|
||||
input,
|
||||
video,
|
||||
svg {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
}
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Forms */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* thanks to HTML5boilerplate,
|
||||
* github.com/nathansmith/formalize and www.sitepen.com
|
||||
*/
|
||||
|
||||
/* buttons */
|
||||
.#{$kna-namespace}btn {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* forms items */
|
||||
form,
|
||||
fieldset {
|
||||
border: none;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
label,
|
||||
.#{$kna-namespace}btn {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: $color-base;
|
||||
}
|
||||
|
||||
label {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
legend {
|
||||
border: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 5em;
|
||||
vertical-align: top;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
select {
|
||||
-webkit-appearance: menulist-button;
|
||||
}
|
||||
|
||||
/* if select styling bugs on WebKit */
|
||||
/* select { -webkit-appearance: none; } */
|
||||
|
||||
/* 'x' appears on right of search input when text is entered. This removes it */
|
||||
input[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;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}btn,
|
||||
input[type="button"],
|
||||
button {
|
||||
&:focus {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* unstyled forms */
|
||||
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="submit"],
|
||||
input[type="reset"] {
|
||||
&.#{$kna-namespace}unstyled {
|
||||
padding: 0;
|
||||
border: none;
|
||||
line-height: 1;
|
||||
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,120 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Stylings (minor stylings) */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* styling elements */
|
||||
code,
|
||||
kbd,
|
||||
mark {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding: 0 2px;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
pre {
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 2px 4px;
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
color: #b11;
|
||||
}
|
||||
|
||||
pre code {
|
||||
padding: 0;
|
||||
background: none;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
sup,
|
||||
sub {
|
||||
vertical-align: 0;
|
||||
}
|
||||
|
||||
sup {
|
||||
bottom: 1ex;
|
||||
}
|
||||
|
||||
sub {
|
||||
top: 0.5ex;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
position: relative;
|
||||
padding-left: 3em;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
blockquote::before {
|
||||
content: "\201C";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
font-family: georgia, serif;
|
||||
font-size: 5em;
|
||||
height: .4em;
|
||||
line-height: .9;
|
||||
color: rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
blockquote > footer {
|
||||
margin-top: .75em;
|
||||
font-size: 0.9em;
|
||||
color: rgba(0, 0, 0, .7);
|
||||
|
||||
&::before {
|
||||
content: "\2014 \0020";
|
||||
}
|
||||
}
|
||||
|
||||
q {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
q,
|
||||
.#{$kna-namespace}q {
|
||||
quotes: "“\00a0" "\00a0”";
|
||||
|
||||
&: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;
|
||||
}
|
||||
|
||||
/* tables */
|
||||
table,
|
||||
.#{$kna-namespace}table {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding: $small-value;
|
||||
color: #555;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0.3em 0.8em;
|
||||
border: 1px #aaa dotted;
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Tables */
|
||||
/* ----------------------------- */
|
||||
|
||||
table,
|
||||
.#{$kna-namespace}table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
vertical-align: top;
|
||||
margin-bottom: $medium-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}table {
|
||||
display: table;
|
||||
}
|
||||
|
||||
#recaptcha_table,
|
||||
.#{$kna-namespace}table-auto {
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
vertical-align: top;
|
||||
min-width: $medium-value;
|
||||
cursor: default;
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
/* Autogrid object */
|
||||
/* see http://codepen.io/raphaelgoetter/pen/KMgBJd */
|
||||
@media (min-width: $small) {
|
||||
[class^="autogrid"],
|
||||
[class*=" autogrid"] {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
[class^="autogrid"] > *,
|
||||
[class*=" autogrid"] > * {
|
||||
flex: 1;
|
||||
min-width: 0; /* avoid min-width:auto */
|
||||
}
|
||||
}
|
||||
|
||||
/* Autogrid variants */
|
||||
@media (min-width: $small) {
|
||||
.has-gutter > *:not(:first-child) {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
[class*="--reverse"] {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
/* Media object */
|
||||
/* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
|
||||
@media (min-width: $small) {
|
||||
.o-media {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.o-media-content {
|
||||
flex: 1;
|
||||
min-width: 0; /* avoid min-width:auto */
|
||||
}
|
||||
}
|
||||
|
||||
/* Media variants */
|
||||
@media (min-width: $small) {
|
||||
.o-media--reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.o-media-figure--center {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,359 +0,0 @@
|
|||
/* ---------------------------------- */
|
||||
/* ==Helpers */
|
||||
/* ---------------------------------- */
|
||||
|
||||
/* State Helpers */
|
||||
/* ------------- */
|
||||
|
||||
/* invisible for all */
|
||||
.is-hidden,
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
|
||||
.is-disabled,
|
||||
[disabled] {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
cursor: not-allowed;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
ul {
|
||||
&.is-unstyled,
|
||||
&.unstyled {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Width Helpers */
|
||||
/* ------------- */
|
||||
|
||||
/* blocks widths (percentage and pixels) */
|
||||
.#{$kna-namespace}w10 {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}w20 {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}w25 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}w30 {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}w33 {
|
||||
width: 33.3333%;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}w40 {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}w50 {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}w60 {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}w66 {
|
||||
width: 66.6666%;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}w70 {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}w75 {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}w80 {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}w90 {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}w100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}w50p {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}w100p {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}w150p {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}w200p {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}w300p {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
@media (min-width: 401px) {
|
||||
.#{$kna-namespace}w400p {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}w500p {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}w600p {
|
||||
width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 701px) {
|
||||
|
||||
.#{$kna-namespace}w700p {
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}w800p {
|
||||
width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 961px) {
|
||||
.#{$kna-namespace}w960p {
|
||||
width: 960px;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mw960p {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}w1140p {
|
||||
width: 1140px;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mw1140p {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$kna-namespace}wauto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Spacing Helpers */
|
||||
/* --------------- */
|
||||
|
||||
.#{$kna-namespace}man,
|
||||
.#{$kna-namespace}ma0 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}pan,
|
||||
.#{$kna-namespace}pa0 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mas {
|
||||
margin: $small-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mam {
|
||||
margin: $medium-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mal {
|
||||
margin: $large-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}pas {
|
||||
padding: $small-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}pam {
|
||||
padding: $medium-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}pal {
|
||||
padding: $large-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mtn,
|
||||
.#{$kna-namespace}mt0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mts {
|
||||
margin-top: $small-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mtm {
|
||||
margin-top: $medium-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mtl {
|
||||
margin-top: $large-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mrn,
|
||||
.#{$kna-namespace}mr0 {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mrs {
|
||||
margin-right: $small-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mrm {
|
||||
margin-right: $medium-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mrl {
|
||||
margin-right: $large-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mbn,
|
||||
.#{$kna-namespace}mb0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mbs {
|
||||
margin-bottom: $small-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mbm {
|
||||
margin-bottom: $medium-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mbl {
|
||||
margin-bottom: $large-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mln,
|
||||
.#{$kna-namespace}ml0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mls {
|
||||
margin-left: $small-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mlm {
|
||||
margin-left: $medium-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mll {
|
||||
margin-left: $large-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mauto {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mtauto {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mrauto {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mbauto {
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}mlauto {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}ptn,
|
||||
.#{$kna-namespace}pt0 {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}pts {
|
||||
padding-top: $small-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}ptm {
|
||||
padding-top: $medium-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}ptl {
|
||||
padding-top: $large-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}prn,
|
||||
.#{$kna-namespace}pr0 {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}prs {
|
||||
padding-right: $small-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}prm {
|
||||
padding-right: $medium-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}prl {
|
||||
padding-right: $large-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}pbn,
|
||||
.#{$kna-namespace}pb0 {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}pbs {
|
||||
padding-bottom: $small-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}pbm {
|
||||
padding-bottom: $medium-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}pbl {
|
||||
padding-bottom: $large-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}pln,
|
||||
.#{$kna-namespace}pl0 {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}pls {
|
||||
padding-left: $small-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}plm {
|
||||
padding-left: $medium-value;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}pll {
|
||||
padding-left: $large-value;
|
||||
}
|
||||
Loading…
Reference in a new issue