Compare commits
No commits in common. "master" and "2.9.4" have entirely different histories.
51 changed files with 5251 additions and 7766 deletions
|
|
@ -1,2 +0,0 @@
|
||||||
>1.5%
|
|
||||||
not op_mini all
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
root = true
|
|
||||||
|
|
||||||
[*]
|
|
||||||
end_of_line = lf
|
|
||||||
indent_style = space
|
|
||||||
indent_size = 2
|
|
||||||
charset = utf-8
|
|
||||||
0
.gitattributes
vendored
Executable file → Normal file
0
.gitattributes
vendored
Executable file → Normal file
16
.gitignore
vendored
Executable file → Normal file
16
.gitignore
vendored
Executable file → Normal file
|
|
@ -59,6 +59,7 @@ local.properties
|
||||||
*.tlb
|
*.tlb
|
||||||
*.tli
|
*.tli
|
||||||
*.tlh
|
*.tlh
|
||||||
|
*.tmp
|
||||||
*.vspscc
|
*.vspscc
|
||||||
.builds
|
.builds
|
||||||
*.dotCover
|
*.dotCover
|
||||||
|
|
@ -93,7 +94,6 @@ DocProject/Help/*.hhp
|
||||||
DocProject/Help/Html2
|
DocProject/Help/Html2
|
||||||
DocProject/Help/html
|
DocProject/Help/html
|
||||||
|
|
||||||
|
|
||||||
# Click-Once directory
|
# Click-Once directory
|
||||||
publish
|
publish
|
||||||
|
|
||||||
|
|
@ -162,17 +162,3 @@ pip-log.txt
|
||||||
|
|
||||||
# Mac crap
|
# Mac crap
|
||||||
.DS_Store
|
.DS_Store
|
||||||
/README 1.md
|
|
||||||
*.cfg
|
|
||||||
|
|
||||||
# parce qu'on s'en fout
|
|
||||||
*.log
|
|
||||||
|
|
||||||
# parce que trop lourd, ...
|
|
||||||
node_modules/
|
|
||||||
package-lock.json
|
|
||||||
yarn.lock
|
|
||||||
|
|
||||||
# parce que certaines personnes utilisent de vrais IDEs
|
|
||||||
.idea
|
|
||||||
*.iml
|
|
||||||
|
|
|
||||||
13
LICENSE
13
LICENSE
|
|
@ -1,13 +0,0 @@
|
||||||
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
|
|
||||||
Version 2, December 2004
|
|
||||||
|
|
||||||
Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
|
|
||||||
|
|
||||||
Everyone is permitted to copy and distribute verbatim or modified
|
|
||||||
copies of this license document, and changing it is allowed as long
|
|
||||||
as the name is changed.
|
|
||||||
|
|
||||||
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
|
|
||||||
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
|
|
||||||
|
|
||||||
0. You just DO WHAT THE FUCK YOU WANT TO.
|
|
||||||
34
README.md
34
README.md
|
|
@ -1,14 +1,32 @@
|
||||||
# KNACSS
|
KNACSS
|
||||||
|
======
|
||||||
|
http://www.knacss.com
|
||||||
|
|
||||||
**Né en 2012 et après plus de 10 années de bons et loyaux services, le projet initial « KNACSS » d'Alsacréations est officiellement obsolète, n'est plus maintenu et ne sera plus mis à jour.**
|
KNACSS is a minimalist, responsive and extensible style sheet to kick-start your HTML / CSS projects.
|
||||||
|
|
||||||
## Documentation version v8 (v8 = Reborn)
|
Designed by [Alsacreations agency](http://alsacreations.fr) and used on a daily basis in production, KNACSS is not only a lightweight documented framework but also a CSS reset, adapted to every project no matter its size.
|
||||||
|
|
||||||
- Site web de présentation de KNACSS Reborn : <https://www.knacss.com/>
|
It handles basic elements, box sizing, margins, floats, simple and complex aligns, positioning, layout grids, gutters, old IE fallbacks and last but not least responsiveness, everything automagically !
|
||||||
- [**Documentation KNACSS Reborn**](https://www.knacss.com/doc.html)
|
|
||||||
|
|
||||||
## Documentation anciennes versions (v7)
|
Installation
|
||||||
|
-----------
|
||||||
|
There is nothing to install. It is only a CSS file you can call as usual in the head of your document with a link element:
|
||||||
|
|
||||||
- [**Documentation KNACSS v7**](https://www.knacss.com/doc-old.html)
|
<link rel="stylesheet" href="knacss.css" media="all">
|
||||||
- [**Pense-bête PDF KNACSS v7**](https://www.knacss.com/assets/pdf/knacss7-cheatsheet.pdf)
|
|
||||||
|
|
||||||
|
You can also install KNACSS with [Bower](http://bower.io/) : ```bower install knacss```
|
||||||
|
|
||||||
|
... Or you can also choose the KNACSS Builder : http://knacss.com/builder/
|
||||||
|
|
||||||
|
|
||||||
|
Usage
|
||||||
|
-----
|
||||||
|
KNACSS is a collection of ready to use styles and snippets to kick start your project. Feel free to use it as a “reset”, then make it grow to suit your needs.
|
||||||
|
Take the time to read the documentation before jumping in. Indeed, KNACSS doesn’t always suit beginners’ needs since a little thing can have big consequences.
|
||||||
|
|
||||||
|
Useful links
|
||||||
|
------------
|
||||||
|
* Website and download : http://knacss.com/
|
||||||
|
* Tutorial : http://knacss.com/demos/tutoriel.html
|
||||||
|
* Commented code : http://knacss.com/knacss.html
|
||||||
|
* Sass version on Hugo Giraudel's repo : https://github.com/HugoGiraudel/KNACSS-Sass
|
||||||
|
|
|
||||||
23
bower.json
Normal file
23
bower.json
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
{
|
||||||
|
"name": "KNACSS",
|
||||||
|
"version": "2.9.4",
|
||||||
|
"homepage": "http://www.knacss.com/",
|
||||||
|
"authors": [
|
||||||
|
"Raphaël GOETTER, Alsacreations"
|
||||||
|
],
|
||||||
|
"description": "KNACSS is a minimalist, responsive and extensible style sheet to kick-start your HTML / CSS projects. It relies on common best practices and experience on the topic.",
|
||||||
|
"main": "css/knacss.css",
|
||||||
|
"keywords": [
|
||||||
|
"css", "framework", "reset", "responsive", "rwd", "boilerplate", "workflow"
|
||||||
|
],
|
||||||
|
"license": "WTFPL",
|
||||||
|
"ignore": [
|
||||||
|
"**/.*",
|
||||||
|
"node_modules",
|
||||||
|
"bower_components",
|
||||||
|
"test",
|
||||||
|
"less/knackLESS.zip",
|
||||||
|
"tests",
|
||||||
|
"README.md"
|
||||||
|
]
|
||||||
|
}
|
||||||
357
changelog.md
357
changelog.md
|
|
@ -1,357 +0,0 @@
|
||||||
# Changelog
|
|
||||||
|
|
||||||
- 24 janvier 2022 (8.2.1) : corrections des radio / checkbox
|
|
||||||
- 19 janvier 2022 (8.2) : refonte des variables d'espacement
|
|
||||||
- 5 janvier 2022 (8.1) : refonte des variables de couleur
|
|
||||||
- 9 juillet 2021 (8.0.5) : suppression min-height: 0 par défaut
|
|
||||||
- 26 avril 2021 : taille de base 100% (et non plus 62.5%) et corrections Grillade
|
|
||||||
- 5 mars 2021 : les classes utilitaires font à présent partie du Core
|
|
||||||
- 26 novembre 2020 : Documentation + V1.0.0
|
|
||||||
- 22 octobre 2020 : grosse remise à jour. V0.9.0
|
|
||||||
- 12 octobre 2020 : début de refonte classes utilitaires
|
|
||||||
- 11 août 2020 : refonte des composants principaux
|
|
||||||
- 19 mai 2020 : fichier de composant `button.scss` et mixin Sass
|
|
||||||
- 29 février 2020 : feuille de style accessibilité
|
|
||||||
- 13 février 2020 : on repart de zéro...
|
|
||||||
|
|
||||||
## Changelog 2020
|
|
||||||
|
|
||||||
Né en 2012 et après près de 10 années de bons et loyaux services, le projet initial « KNACSS » d'Alsacréations laisse place à une toute nouvelle version, totalement remaniée : KNACSS Reborn, correspondant à la Branche et version 8.
|
|
||||||
|
|
||||||
## Changelog v8.0.0 (xxx 2019)
|
|
||||||
|
|
||||||
- Architecture : mise à jour du reset, suppression des reset vendors (Reboot de Boostrap)
|
|
||||||
- Architecture : renommage de dossiers à la "7-1 pattern": `_config` > `abstracts`, `_library` > `base`, et du fichier `_base.scss` en `_reset.scss`
|
|
||||||
- Architecture : modification de l'ordre d'import des fichiers : les utilitaires sont importées à la fin à présent
|
|
||||||
- Compatibilité : support passé de IE10 à IE11 (browserlist)
|
|
||||||
- Compatibilité : Browserslist devenu `.browserslistrc` et mise à jour du support à `>0.25% not op_mini all`
|
|
||||||
- Compatibilité : fichier gulpfile.js dorénavant compatible Gulp 4
|
|
||||||
- Compatibilité : versions exactes des dépendances dans package.json (pour éviter "latest")
|
|
||||||
- Grillade :renommage des classes `grid-` en `grillade-` pour éviter tout conflit
|
|
||||||
- Grillade : ajout du constructeur `medium-X` en plus de `small-X`
|
|
||||||
- Grillade : ajout des constructeus `-start`, `-end`, `-center`, `-space-between`, `-space-around`, `-space-evenly` pour l'alignement général de la grille
|
|
||||||
- Divers : ajout d'une variable pour supporter ou non IE11 : `$ie: true !default;`.
|
|
||||||
- Divers :ajout d'une variable pour supporter ou non WordPress : `$wordpress: false !default;`.
|
|
||||||
- Divers :`visually-hidden` devient un mixin
|
|
||||||
- Divers :corrections typo
|
|
||||||
|
|
||||||
## Changelog v7.1.2 (30 janvier 2019)
|
|
||||||
|
|
||||||
- ajout de la règle `@media (prefers-reduced-motion: reduce)`
|
|
||||||
- ajout de `@supports (display: grid)` dans le mixin de grille
|
|
||||||
|
|
||||||
## Changelog v7.1.1 (10 decembre 2018)
|
|
||||||
|
|
||||||
- patch correctif de gulpfile
|
|
||||||
|
|
||||||
## Changelog v7.1.0 (31 octobre 2018)
|
|
||||||
|
|
||||||
- mise à jour et meilleure intégration de gulp / postCSS :
|
|
||||||
- autoprefixer version postCSS (avec browserslist officielle),
|
|
||||||
- unprefix : pour supprimer les vieux préfixes inutiles
|
|
||||||
- flexbox-fixes : pour corriger les erreurs connues sur IE
|
|
||||||
- gap-properties : polyfill de gap -> grid-gap
|
|
||||||
- minification CSS avec CSSnano
|
|
||||||
- application de `white-space: pre-rap` sur les textarea
|
|
||||||
|
|
||||||
## Changelog v7.0.9 (24 octobre 2018)
|
|
||||||
|
|
||||||
- correction d'alignement vertical de `.nav-button`
|
|
||||||
|
|
||||||
## Changelog v7.0.8 (20 septembre 2018)
|
|
||||||
|
|
||||||
- suppression de `white-space: nowrap` sur les éléments de formulaire
|
|
||||||
|
|
||||||
## Changelog v7.0.7 (3 juillet 2018)
|
|
||||||
|
|
||||||
- cohérence de renommage pour les classes utilitaires (ajout du préfixe `.u-` uniformément)
|
|
||||||
|
|
||||||
## Changelog v7.0.5 (25 mai 2018)
|
|
||||||
|
|
||||||
- mise à jour des styles, SVG, et variables des checkbox, radio et switches
|
|
||||||
|
|
||||||
## Changelog v7.0.4 (04 avril 2018)
|
|
||||||
|
|
||||||
- ajout de `::placeholder` cf. issue #276
|
|
||||||
|
|
||||||
## Changelog v7.0.3 (01 mars 2018)
|
|
||||||
|
|
||||||
- suppression de commentaires inutiles
|
|
||||||
|
|
||||||
## Changelog v7.0.2 (04 janvier 2018)
|
|
||||||
|
|
||||||
- intégration de (auto)grid dans Grillade
|
|
||||||
|
|
||||||
## Changelog v7.0.1 (22 décembre 2017)
|
|
||||||
|
|
||||||
- meilleure gestion des hyphens
|
|
||||||
- mise en commentaire du fix SVG our IE11
|
|
||||||
|
|
||||||
## Changelog v7.0.0 (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-micro`)
|
|
||||||
- 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
|
|
||||||
- `tab-size: 2;` sur les `<pre>`
|
|
||||||
- passage en System Font Stack. cf. <https://css-tricks.com/snippets/css/system-font-stack/>
|
|
||||||
|
|
||||||
## Changelog v6.1.1 (21 avril 2017)
|
|
||||||
|
|
||||||
- amélioration du mixin "respond-to()"
|
|
||||||
|
|
||||||
## 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 `$link-color`, etc.
|
|
||||||
- typo fix
|
|
||||||
|
|
||||||
## Changelog v6.0.8 (10 janvier 2017)
|
|
||||||
|
|
||||||
- application de `$link-color-hover` uniquement si différent de `$link-color`
|
|
||||||
|
|
||||||
## Changelog v6.0.7 (7 décembre 2016)
|
|
||||||
|
|
||||||
- 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)
|
|
||||||
|
|
||||||
## Changelog v6.0.5 (1er décembre 2016)
|
|
||||||
|
|
||||||
- redéfinition des variables de breakpoints, à présent calées sur [celles de Bootstrap](https://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints)
|
|
||||||
|
|
||||||
## Changelog v6.0.4 (22 novembre 2016)
|
|
||||||
|
|
||||||
- renommage des variables
|
|
||||||
|
|
||||||
## Changelog v6.0.3 (10 novembre 2016)
|
|
||||||
|
|
||||||
- renommage `grid-item-*` en `item-*` pour éviter [les conflits](https://github.com/alsacreations/KNACSS/issues/222)
|
|
||||||
|
|
||||||
## Changelog v6.0.2 (27 octobre 2016)
|
|
||||||
|
|
||||||
- optimisation de la grille (de 8ko à 3ko pour la version Sass)
|
|
||||||
|
|
||||||
## Changelog v6.0.0 (26 septembre 2016)
|
|
||||||
|
|
||||||
- refonte intégrale de la grille de mise en forme (adoption de [grillade.css](http://grillade.knacss.com))
|
|
||||||
- suppression de include-media (cause de bugs d'encodage : cf. [#203](https://github.com/alsacreations/KNACSS/issues/203) / [#197](https://github.com/alsacreations/KNACSS/issues/197) , nécessite un temps d'apprentissage, et n'apporte pas grand chose au final).
|
|
||||||
- refonte des valeurs des Breakpoints et des classes responsive. [voir issue #210](https://github.com/alsacreations/KNACSS/issues/210)
|
|
||||||
- modularisation des fichiers et dossiers, classés par fonctions (config, vendor, library, objects, utility)
|
|
||||||
- ajout des objects courants : [media](http://codepen.io/raphaelgoetter/pen/KMWWwj) et [autogrid](http://codepen.io/raphaelgoetter/pen/KMgBJd?editors=1100)
|
|
||||||
- suppression des positionnements tabulaires. `.row`, `.col` et `.line` n'ont plus lieu d'être depuis Flexbox, pouvaient entrer en conflit avec d'autres frameworks et ne font que parasiter KNACSS
|
|
||||||
- amélioration du fichier Gulpfile.js
|
|
||||||
- corrections de bugs divers
|
|
||||||
- mise à jour de la doc
|
|
||||||
|
|
||||||
## Changelog v5.0.1 (24 mai 2016)
|
|
||||||
|
|
||||||
- les helpers de largeurs deviennent mobile-first et ne s'activent que sur écran d'une certaine taille. Ex. `.w700p {width: 700px;}` devient `@include media('>640px') {.w700p {width: 700px;}}`. Ainsi il n'est plus nécessaire de les écraser dans la feuille de style responsive.
|
|
||||||
|
|
||||||
## Changelog v5.0.0 (23 mai 2016)
|
|
||||||
|
|
||||||
- suppression du support IE8-IE9 (à partir de la version KNACSS 5.0, seul IE10 et supérieurs sont pris en charge)
|
|
||||||
- suppression du support LESS (à partir de la version KNACSS 5.0, seul le préprocesseur Sass est encore pris en charge pour des raisons de maintenabilité)
|
|
||||||
- mise à jour vers Normalize 4.1.1 : <https://github.com/necolas/normalize.css/blob/4.1.1/CHANGELOG.md>
|
|
||||||
- restructuration / renommage des fichiers avec préfixes `_config-`, `_layout-`, `_library-`, `_object-`, `_override-`
|
|
||||||
- ajout de la library include-media (<http://include-media.com/>) pour faciliter la gestion des media queries
|
|
||||||
- adaptation des variables de breakpoint pour les rendre compatibles avec include-media
|
|
||||||
- grille "grillade" à présent en mobile first (par défaut 1 colonne sur "tiny", 2 colonnes sur "small", valeurs modifiables)
|
|
||||||
- nommage de variables préfixé pour plus de maintenabilité : `$gutter` -> `$grid-gutter`, `$number` -> `$grid-number`, `$left` -> `$grid-left` et `$right` -> `$grid-right`
|
|
||||||
- renommage des éléments de grilles : `.flex-item-double` --> `.grid-item-double` (plus cohérent)
|
|
||||||
- ajout des éléments de layout : `.grid-item-first`, `.grid-item-medium` et `.grid-item-last`
|
|
||||||
- ajout de Table des Matières dans la feuille de style non minifiée
|
|
||||||
- adaptation des fichiers gulpfile, package.json et bower.json
|
|
||||||
- mise à jour de la documentation
|
|
||||||
|
|
||||||
## Changelog v4.4.5 (1er avril 2016)
|
|
||||||
|
|
||||||
- mise à jour vers Normalize 4 : <https://github.com/necolas/normalize.css/blob/4.0.0/CHANGELOG.md>
|
|
||||||
- application de min-width: 0 sur les flex-item-fluid pour éviter les minimum automatiques des flex-items
|
|
||||||
- suppression des styles spécifiques à Gmap (sélecteurs trop lourds pour un cas très particuliers)
|
|
||||||
|
|
||||||
## Changelog v4.4.4 (23 janvier 2016)
|
|
||||||
|
|
||||||
- mise à jour vers Normalize 3.0.3 : <https://github.com/necolas/normalize.css/>
|
|
||||||
- réalignement vertical des input et des label
|
|
||||||
|
|
||||||
## Changelog v4.4.3 (14 janvier 2016)
|
|
||||||
|
|
||||||
- ajout du patch `min-width: 0` sur les flex-items de grilles
|
|
||||||
|
|
||||||
## Changelog v4.4.2 (24 décembre 2015)
|
|
||||||
|
|
||||||
- correction d'un bug responsive des classes `.flex-item-double`
|
|
||||||
- création de la feuille de style dédiée aux grilles : _grillade.css_ pour ceux qui souhaitent se contenter des grilles de KNACSS
|
|
||||||
|
|
||||||
## Changelog v4.4.0 (12 décembre 2015)
|
|
||||||
|
|
||||||
- ajout de classes d'état dans les helpers (`is-disabled`, `is-hidden`, `is-visually-hidden`, `is-unstyled`)
|
|
||||||
- import de la feuille de style dédiée WordPress mise en commentaire par défaut et activable au besoin
|
|
||||||
- la taille de police de base est à présent de "1.4rem" et non un calcul en `em` à partir d'une valeur en pixels
|
|
||||||
- suppression de `@font-stack-universal` devenue inutile (servait dans les grilles inline-block)
|
|
||||||
- suppression de "helvetica, arial" dans les font-stacks par défaut (seul reste "sans-serif")
|
|
||||||
- ajout d'une classe `.bfc` (actuellement alias de l'existante `.mod`)
|
|
||||||
- ajout d'une classe `.no-wrapping` pour les éléments qui ne doivent pas adopter de césures sur petit écran
|
|
||||||
- ajout de classes helpers pour les marges automatiques (`.mtauto`, `mrauto`, `.mauto`, etc.)
|
|
||||||
|
|
||||||
## Changelog v4.3.6 (10 novembre 2015)
|
|
||||||
|
|
||||||
- modification de la valeur par défaut de gouttière (`1em` -> `2rem`)
|
|
||||||
- correction d'un `padding: none` en `padding: 0` dans styling.less|sass
|
|
||||||
|
|
||||||
## Changelog v4.3.5 (20 octobre 2015)
|
|
||||||
|
|
||||||
- correction de doublons
|
|
||||||
- ajout de `word-break: break-all` sur les liens en responsive
|
|
||||||
- suppression du `outline: 0` sur les boutons au focus
|
|
||||||
- correction de visuels dans la documentation
|
|
||||||
|
|
||||||
## Changelog v4.3.4 (27 août 2015)
|
|
||||||
|
|
||||||
- ajout des classes `.pull` et `.push` pour les offsets des grilles
|
|
||||||
- corrections de la doc Print et Commencer
|
|
||||||
- corrections de nommages reliquats : `.flexitem-double` -> `.flex-item-double`
|
|
||||||
- suppression des styles graphiques pour tableaux alternate et striped
|
|
||||||
- modifications sur la classe `.visually-hidden`
|
|
||||||
|
|
||||||
## Changelog v4.3.3 (6 août 2015)
|
|
||||||
|
|
||||||
- ajout de helpers (breakpoints responsive)
|
|
||||||
- modification du seuil de breakpoint pour les grilles inégales `@tiny-screen` -> `@small-screen`
|
|
||||||
- corrections feuille de style print (modifications plus faciles pour l'utilisateur)
|
|
||||||
|
|
||||||
## Changelog v4.3.1 (5 juillet 2015)
|
|
||||||
|
|
||||||
- Amélioration des grilles responsive. Par exemple la classe `grid-4-small-2-tiny-1` définira une grille de 4 colonnes sur grand écran, puis en 2 colonnes sur un écran réduit, puis en une seule colonne sur petit écran. La notation `grid-4` fonctionne toujours, mais ne sera pas automatiquement responsive.
|
|
||||||
|
|
||||||
## Changelog v4.3.0 (3 juillet 2015)
|
|
||||||
|
|
||||||
- Les grilles de KNACSS sont à présent rétrocompatibles jusqu'à IE8 et Android2 grâce à un fallback en `display: inline-block` pour ces anciens navigateurs. Cependant les fonctionnalités resteront limitées chez ces dinosaures (pas de `flex-item-double`, de `flex-item-first`, etc.)
|
|
||||||
|
|
||||||
## Changelog v4.2.3 (2 juillet 2015)
|
|
||||||
|
|
||||||
- Passage à l'indentation via 2 espaces et non plus tabulations (+ `.editorconfig` à jour)
|
|
||||||
- Répartition des styles tabulaires entre les fichiers `tables` et `styling`
|
|
||||||
- pas de namespace sur les classes `.clear`, `.clearfix` et `.visually-hidden`
|
|
||||||
- ajout d'une classe `.bfc` (identique à `.mod`) et qui crée un contexte de formatage block
|
|
||||||
|
|
||||||
## Changelog v4.2.2 (26 juin 2015)
|
|
||||||
|
|
||||||
- Ajout de !default aux variables SASS dans le fichier `_00-config.scss`
|
|
||||||
- Flex-container enhancement
|
|
||||||
- select element enhancement on webkit
|
|
||||||
- correction largeurs des grilles pour IE
|
|
||||||
- correction de divers doublons
|
|
||||||
|
|
||||||
## Changelog v4.2.1 (25 mai 2015)
|
|
||||||
|
|
||||||
- pour les grilles, suppression de l'alignement justifié par défaut (justify-content: space-between)
|
|
||||||
|
|
||||||
## Changelog v4.2.0 (05 mai 2015)
|
|
||||||
|
|
||||||
- possibilité d'ajouter un namespace à l'ensemble des classes (configurable dans le fichier config de Less et Sass)
|
|
||||||
|
|
||||||
## Changelog v4.1.6 (17 avril 2015)
|
|
||||||
|
|
||||||
- mise en commentaire des sauts de page print avant un h1
|
|
||||||
- correction d'anomalie sur les input (user-select: none)
|
|
||||||
- correction d'erreur de compilation Sass
|
|
||||||
|
|
||||||
## Changelog v4.1.4 (14 avril 2015)
|
|
||||||
|
|
||||||
- ajout de node_modules dans le .gitignore
|
|
||||||
- ajout d'un gulpfile.js et des dépendances dans package.json
|
|
||||||
- ajout de la classe .unstyled destinée aux éléments de formulaires
|
|
||||||
|
|
||||||
## Changelog v4.1.3 (13 avril 2015)
|
|
||||||
|
|
||||||
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).
|
|
||||||
|
|
||||||
Anciens noms :
|
|
||||||
|
|
||||||
```
|
|
||||||
.flexbox, .flexbox-h
|
|
||||||
.flexbox-v
|
|
||||||
.flexitem-fluid
|
|
||||||
.flexitem-center
|
|
||||||
.flexitem-first, .flexitem-medium, .flexitem-last
|
|
||||||
```
|
|
||||||
|
|
||||||
Nouveaux noms :
|
|
||||||
|
|
||||||
```
|
|
||||||
.flex-container, .flex-container-h
|
|
||||||
.flex-container-v
|
|
||||||
.flex-item-fluid
|
|
||||||
.flex-item-center
|
|
||||||
.flex-item-first, .flex-item-medium, .flex-item-last
|
|
||||||
```
|
|
||||||
|
|
||||||
## Changelog v4.1.1 (30 mars 2015)
|
|
||||||
|
|
||||||
## Vite fait
|
|
||||||
|
|
||||||
- grosse remise à jour, orientée vers les technos modernes (flexbox, rem, calc, ...) et moins de "bidouille"
|
|
||||||
- fin du support d'IE6-IE8 Si vous souhaitez utiliser KNACSS sur d'anciens navigateurs, préférez la [Version 3](https://github.com/raphaelgoetter/KNACSS/tree/3.1.0)
|
|
||||||
- ajout du reset [normalize.css](http://necolas.github.io/normalize.css/)
|
|
||||||
- un grand merci à @7studio pour ses conseils et observations sur la version beta de KNACSS 4.0
|
|
||||||
- attention : rétrocompatibilité non préservée pour certaines classes ( .left, .start, .txtleft, .fl, .table-, .flex-start, .flex-end)
|
|
||||||
- attention : rétrocompatibilité non préservée pour les grilles de mise en page (passage à flexbox et simplification de la structure)
|
|
||||||
|
|
||||||
## Done
|
|
||||||
|
|
||||||
- documentation en français
|
|
||||||
- PDF pense-bête mis à jour : <http://knacss.com/KNACSS-cheatsheet.pdf>
|
|
||||||
- gros ménage de printemps (gros nettoyage de tous les espaces et tabulations disgrâcieux)
|
|
||||||
- dans la section "quick print reset", ajout des classes .p-like, h1-like, h2-like etc.
|
|
||||||
- mise en commun globale de tous les styles p avec .p-like (h1 et h1-like, etc.).
|
|
||||||
- déplacement et commentaire sur la règle body > script
|
|
||||||
- correction du bug des height: auto sur les images au format SVG
|
|
||||||
- meilleure intégration de box-sizing
|
|
||||||
- suppression du fichier dédié aux réglages des bugs des anciennes versions d'IE6-IE8
|
|
||||||
- fin du support d'IE9 pour les grilles : KNACSS v4 compatible IE10+ pour ce qui concerne les mises en page en grilles (flexbox FTW!)
|
|
||||||
- réorganisation des fichiers (le fichier dédié "IE.css" disparait, le fichier "booleans" devient "misc" (plus cohérent), le fichier "gmaps" est désormais inclus dans "misc")
|
|
||||||
- ajout des préfixes ".table-" devant les styles de décoration des tableaux
|
|
||||||
- suppression du fichier icons.css, statistiquement inutile en pratique
|
|
||||||
- meilleure cohérence de nommage entre .left, .start, .txtleft, .fl
|
|
||||||
- ajout d'un fichier de reset dédié à WordPress
|
|
||||||
- refonte intégrale des grilles en Flexbox (et en plus ça marche sur IE10 !)
|
|
||||||
- ajout d'un fichier .editorconfig (<http://editorconfig.org/>)
|
|
||||||
- passage des :before/:after en ::before/::after
|
|
||||||
- ajout de sourcemaps CSS
|
|
||||||
- suppression des images noir et blanc forcées en media print
|
|
||||||
- correction de la formule LESS `{calc(1em * .625);`
|
|
||||||
- ajout du reset [normalize.css](http://necolas.github.io/normalize.css/)
|
|
||||||
- mise à jour du générateur de gabarits [Schnaps.it](http://schnaps.it/)
|
|
||||||
897
css/01-base.css
Normal file
897
css/01-base.css
Normal file
|
|
@ -0,0 +1,897 @@
|
||||||
|
/*!
|
||||||
|
* www.KNACSS.com V2.9.3 (2014-02) @author: Raphael Goetter, Alsacreations
|
||||||
|
* Licence WTFPL http://www.wtfpl.net/
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* == soft reset */
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* switching box model for all elements */
|
||||||
|
|
||||||
|
* {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* soft reset */
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
padding-left: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.unstyled {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
vertical-align: middle;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
audio,
|
||||||
|
canvas,
|
||||||
|
video {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
svg:not(:root) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* == typography */
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* base font-size corresponds to 10px and is adapted to rem unit */
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 62.5%;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
-ms-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #ffffff;
|
||||||
|
color: #000000;
|
||||||
|
font-family: Helvetica, Arial, sans-serif;
|
||||||
|
font-size: 1.4em;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* font-sizing for content */
|
||||||
|
|
||||||
|
/* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
|
||||||
|
|
||||||
|
p,
|
||||||
|
ul,
|
||||||
|
ol,
|
||||||
|
dl,
|
||||||
|
blockquote,
|
||||||
|
pre,
|
||||||
|
td,
|
||||||
|
th,
|
||||||
|
label,
|
||||||
|
textarea,
|
||||||
|
caption,
|
||||||
|
details,
|
||||||
|
figure,
|
||||||
|
hgroup {
|
||||||
|
margin-top: .75em;
|
||||||
|
margin-bottom: 0;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
.h1-like {
|
||||||
|
margin-top: 0.65625em;
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 3.2rem;
|
||||||
|
line-height: 1.3125;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2,
|
||||||
|
.h2-like {
|
||||||
|
margin-top: 0.75em;
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 2.8rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3,
|
||||||
|
.h3-like {
|
||||||
|
margin-top: 0.875em;
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 2.4rem;
|
||||||
|
line-height: 1.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4,
|
||||||
|
.h4-like {
|
||||||
|
margin-top: 1.05em;
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 2rem;
|
||||||
|
line-height: 1.05;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5,
|
||||||
|
.h5-like {
|
||||||
|
margin-top: 1.1666666666666667em;
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
line-height: 1.1666666666666667;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6,
|
||||||
|
.h6-like {
|
||||||
|
margin-top: 1.3125em;
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
line-height: 1.3125;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* alternate font-sizing */
|
||||||
|
|
||||||
|
.smaller {
|
||||||
|
font-size: 0.7142857142857143em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small {
|
||||||
|
font-size: 0.8571428571428571em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.big {
|
||||||
|
font-size: 1.1428571428571428em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bigger {
|
||||||
|
font-size: 1.2857142857142858em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.biggest {
|
||||||
|
font-size: 1.4285714285714286em;
|
||||||
|
}
|
||||||
|
|
||||||
|
code,
|
||||||
|
pre,
|
||||||
|
samp,
|
||||||
|
kbd {
|
||||||
|
white-space: pre-line;
|
||||||
|
/* IE fix */
|
||||||
|
white-space: pre-wrap;
|
||||||
|
font-family: Consolas, 'DejaVu Sans Mono', Courier, monospace;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
mark {
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
em {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
kbd {
|
||||||
|
padding: 0 2px;
|
||||||
|
border: 1px solid #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
padding: 2px 4px;
|
||||||
|
background: rgba(0, 0, 0, 0.04);
|
||||||
|
color: #b11;
|
||||||
|
}
|
||||||
|
|
||||||
|
mark {
|
||||||
|
padding: 2px 4px;
|
||||||
|
background: #ff0;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup,
|
||||||
|
sub {
|
||||||
|
vertical-align: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
bottom: 1ex;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
top: .5ex;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* == hiding content */
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* hiding content */
|
||||||
|
|
||||||
|
.visually-hidden {
|
||||||
|
position: absolute;
|
||||||
|
left: -7000px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
[dir=rtl] .visually-hidden {
|
||||||
|
left: auto;
|
||||||
|
right: -7000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop-hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* hidden on desktop */
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* == skip links styling */
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
.skip-links {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skip-links a {
|
||||||
|
position: absolute;
|
||||||
|
left: -7000px;
|
||||||
|
padding: 0.5em;
|
||||||
|
background: black;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skip-links a:focus {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* == browsers consistency */
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* avoid top margins on first content element */
|
||||||
|
|
||||||
|
p:first-child,
|
||||||
|
ul:first-child,
|
||||||
|
ol:first-child,
|
||||||
|
dl:first-child,
|
||||||
|
blockquote:first-child,
|
||||||
|
pre:first-child,
|
||||||
|
h1:first-child,
|
||||||
|
h2:first-child,
|
||||||
|
h3:first-child,
|
||||||
|
h4:first-child,
|
||||||
|
h5:first-child,
|
||||||
|
h6:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* avoid margins on nested elements */
|
||||||
|
|
||||||
|
li p,
|
||||||
|
li ul,
|
||||||
|
li ol {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* max values */
|
||||||
|
|
||||||
|
img,
|
||||||
|
table,
|
||||||
|
td,
|
||||||
|
blockquote,
|
||||||
|
code,
|
||||||
|
pre,
|
||||||
|
textarea,
|
||||||
|
input,
|
||||||
|
video {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* margin-bottom on tables */
|
||||||
|
|
||||||
|
table {
|
||||||
|
margin-bottom: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Google Gmap3 bug fix on images */
|
||||||
|
|
||||||
|
:not(.gm-style) img {
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ie678 .gm-style img {
|
||||||
|
height: 100%;
|
||||||
|
/* IE678 hack */
|
||||||
|
}
|
||||||
|
|
||||||
|
.gm-style img,
|
||||||
|
.gmnoscreen img,
|
||||||
|
.gmnoprint img {
|
||||||
|
max-width: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* scripts */
|
||||||
|
|
||||||
|
body > script {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* ==layout and modules */
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* float layout */
|
||||||
|
|
||||||
|
/* module, gains superpower "BFC" Block Formating Context */
|
||||||
|
|
||||||
|
.mod {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* blocks that needs to be placed under floats */
|
||||||
|
|
||||||
|
.clear,
|
||||||
|
.line,
|
||||||
|
.row {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* blocks that must contain floats */
|
||||||
|
|
||||||
|
.clearfix:after,
|
||||||
|
.line:after,
|
||||||
|
.mod:after {
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* table layout */
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: table;
|
||||||
|
table-layout: fixed;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row > *,
|
||||||
|
.col {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* inline-block */
|
||||||
|
|
||||||
|
.inbl {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* alignments (blocks and inline) */
|
||||||
|
|
||||||
|
/* ------------------------------ */
|
||||||
|
|
||||||
|
/* left elements */
|
||||||
|
|
||||||
|
.left {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.left {
|
||||||
|
margin-right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* right elements */
|
||||||
|
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.right {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.left,
|
||||||
|
img.right {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.txtleft {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.txtright {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.txtcenter {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* == width helpers */
|
||||||
|
|
||||||
|
/* .. use only when needed */
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* blocks widths (percentage and pixels) */
|
||||||
|
|
||||||
|
.w10 {
|
||||||
|
width: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w20 {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w25 {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w30 {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w33 {
|
||||||
|
width: 33.3333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w40 {
|
||||||
|
width: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w50 {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w60 {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w66 {
|
||||||
|
width: 66.6666%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w70 {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w75 {
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w80 {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w90 {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w100 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w50p {
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w100p {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w150p {
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w200p {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w300p {
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w400p {
|
||||||
|
width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w500p {
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w600p {
|
||||||
|
width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w700p {
|
||||||
|
width: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w800p {
|
||||||
|
width: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w960p {
|
||||||
|
width: 960px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mw960p {
|
||||||
|
max-width: 960px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w1140p {
|
||||||
|
width: 1140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mw1140p {
|
||||||
|
max-width: 1140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wauto {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* == spacing helpers */
|
||||||
|
|
||||||
|
/* .. use only when needed */
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* spacing helpers
|
||||||
|
p,m = padding,margin
|
||||||
|
a,t,r,b,l = all,top,right,bottom,left
|
||||||
|
s,m,l,n = small(10px),medium(20px),large(30px),none(0)
|
||||||
|
source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
|
||||||
|
*/
|
||||||
|
|
||||||
|
.m-reset,
|
||||||
|
.ma0 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-reset,
|
||||||
|
.pa0 {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ma1,
|
||||||
|
.mas {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ma2,
|
||||||
|
.mam {
|
||||||
|
margin: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ma3,
|
||||||
|
.mal {
|
||||||
|
margin: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pa1,
|
||||||
|
.pas {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pa2,
|
||||||
|
.pam {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pa3,
|
||||||
|
.pal {
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt0,
|
||||||
|
.mtn {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt1,
|
||||||
|
.mts {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt2,
|
||||||
|
.mtm {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt3,
|
||||||
|
.mtl {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr0,
|
||||||
|
.mrn {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr1,
|
||||||
|
.mrs {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr2,
|
||||||
|
.mrm {
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr3,
|
||||||
|
.mrl {
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb0,
|
||||||
|
.mbn {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb1,
|
||||||
|
.mbs {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb2,
|
||||||
|
.mbm {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb3,
|
||||||
|
.mbl {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml0,
|
||||||
|
.mln {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml1,
|
||||||
|
.mls {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml2,
|
||||||
|
.mlm {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ml3,
|
||||||
|
.mll {
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt0,
|
||||||
|
.ptn {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt1,
|
||||||
|
.pts {
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt2,
|
||||||
|
.ptm {
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pt3,
|
||||||
|
.ptl {
|
||||||
|
padding-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pr0,
|
||||||
|
.prn {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pr1,
|
||||||
|
.prs {
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pr2,
|
||||||
|
.prm {
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pr3,
|
||||||
|
.prl {
|
||||||
|
padding-right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pb0,
|
||||||
|
.pbn {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pb1,
|
||||||
|
.pbs {
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pb2,
|
||||||
|
.pbm {
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pb3,
|
||||||
|
.pbl {
|
||||||
|
padding-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pl0,
|
||||||
|
.pln {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pl1,
|
||||||
|
.pls {
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pl2,
|
||||||
|
.plm {
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pl3,
|
||||||
|
.pll {
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* == iefix */
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* Make sure you are using Conditional Classes in your HTML */
|
||||||
|
|
||||||
|
/* see : http://www.alsacreations.com/astuce/lire/988-classes-conditionnelles-HTML.html */
|
||||||
|
|
||||||
|
.ie678 h1,
|
||||||
|
.ie678 .h1-like {
|
||||||
|
font-size: 2.2857142857142856em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ie678 h2,
|
||||||
|
.ie678 .h2-like {
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ie678 h3,
|
||||||
|
.ie678 .h3-like {
|
||||||
|
font-size: 1.7142857142857142em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ie678 h4,
|
||||||
|
.ie678 .h4-like {
|
||||||
|
font-size: 1.4285714285714286em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ie678 h5,
|
||||||
|
.ie678 .h5-like {
|
||||||
|
font-size: 1.2857142857142858em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ie678 h6,
|
||||||
|
.ie678 .h6-like {
|
||||||
|
font-size: 1.1428571428571428em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* hasLayout for IE6/IE7 */
|
||||||
|
|
||||||
|
.ie67 .clearfix,
|
||||||
|
.ie67 .line,
|
||||||
|
.ie67 .mod,
|
||||||
|
.ie67 .row,
|
||||||
|
.ie67 .col {
|
||||||
|
zoom: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* inline-block and table-cell for IE6/IE7 */
|
||||||
|
|
||||||
|
/* warning: .col needs width on IE6/IE7 */
|
||||||
|
|
||||||
|
.ie67 .btn,
|
||||||
|
.ie67 .col,
|
||||||
|
.ie67 .inbl {
|
||||||
|
display: inline;
|
||||||
|
zoom: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ie8 img {
|
||||||
|
width: auto;
|
||||||
|
/* @bugfix for IE8 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Active box-sizing for IE6/IE7 */
|
||||||
|
|
||||||
|
/* @source https://github.com/Schepp/box-sizing-polyfill */
|
||||||
|
|
||||||
|
/*
|
||||||
|
.ie67 * {
|
||||||
|
behavior: url(/lib/box-sizing-polyfill/boxsizing.htc);
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* == quick print reset */
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
p,
|
||||||
|
blockquote {
|
||||||
|
orphans: 2;
|
||||||
|
widows: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote,
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
page-break-inside: avoid;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
caption {
|
||||||
|
page-break-after: avoid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* debug helper */
|
||||||
|
|
||||||
|
.knacss-debug {
|
||||||
|
background: pink;
|
||||||
|
outline: 3px solid maroon;
|
||||||
|
}
|
||||||
233
css/02-grids.css
Normal file
233
css/02-grids.css
Normal file
|
|
@ -0,0 +1,233 @@
|
||||||
|
/* ---------------------------------- */
|
||||||
|
|
||||||
|
/* ==classic grids */
|
||||||
|
|
||||||
|
/* .. use it when gutter size matters */
|
||||||
|
|
||||||
|
/* ---------------------------------- */
|
||||||
|
|
||||||
|
/* grids inspired from SUIT https://github.com/suitcss/suit */
|
||||||
|
|
||||||
|
/* font-family hack explained here : https://github.com/raphaelgoetter/KNACSS/issues/37 */
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
overflow: hidden;
|
||||||
|
font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid > * {
|
||||||
|
display: block;
|
||||||
|
padding: 0;
|
||||||
|
margin-left: -20px;
|
||||||
|
/* gutter value */
|
||||||
|
text-align: left;
|
||||||
|
letter-spacing: -0.31em;
|
||||||
|
text-rendering: optimizespeed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Opera hack */
|
||||||
|
|
||||||
|
.opera:-o-prefocus,
|
||||||
|
.grid > * {
|
||||||
|
word-spacing: -0.43em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid > * > * {
|
||||||
|
display: inline-block;
|
||||||
|
*display: inline;
|
||||||
|
*zoom: 1;
|
||||||
|
/* IE67 hack */
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 20px;
|
||||||
|
/* gutter value */
|
||||||
|
margin-left: 0;
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: left;
|
||||||
|
letter-spacing: normal;
|
||||||
|
word-spacing: normal;
|
||||||
|
text-rendering: auto;
|
||||||
|
font-family: Helvetica, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid2 > * {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid3 > * {
|
||||||
|
width: 33.333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid4 > * {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid5 > * {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid6 > * {
|
||||||
|
width: 16.667%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid8 > * {
|
||||||
|
width: 12.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid10 > * {
|
||||||
|
width: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid12 > * {
|
||||||
|
width: 8.333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */
|
||||||
|
|
||||||
|
.grid2-1 > *:first-child,
|
||||||
|
.grid1-2 > * + * {
|
||||||
|
width: 66.666%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid1-2 > *:first-child,
|
||||||
|
.grid2-1 > * + * {
|
||||||
|
width: 33.333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid1-3 > *:first-child,
|
||||||
|
.grid3-1 > * + * {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid3-1 > *:first-child,
|
||||||
|
.grid1-3 > * + * {
|
||||||
|
width: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsiv-o-matic */
|
||||||
|
|
||||||
|
@media (max-width: 1280px) {
|
||||||
|
.grid5 > *,
|
||||||
|
.grid6 > *,
|
||||||
|
.grid8 > *,
|
||||||
|
.grid10 > *,
|
||||||
|
.grid12 > * {
|
||||||
|
width: 33.333%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.grid3 > *,
|
||||||
|
.grid4 > *,
|
||||||
|
.grid5 > *,
|
||||||
|
.grid6 > *,
|
||||||
|
.grid8 > *,
|
||||||
|
.grid10 > *,
|
||||||
|
.grid12 > * {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.grid > * > * {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------------------------------- */
|
||||||
|
|
||||||
|
/* ==autogrids */
|
||||||
|
|
||||||
|
/* .. to automatically justify blocs */
|
||||||
|
|
||||||
|
/* ---------------------------------- */
|
||||||
|
|
||||||
|
/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
|
||||||
|
|
||||||
|
[class*="autogrid"] {
|
||||||
|
text-align: justify;
|
||||||
|
font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
|
||||||
|
letter-spacing: -0.31em;
|
||||||
|
text-rendering: optimizespeed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Opera hack */
|
||||||
|
|
||||||
|
[class*="autogrid"]:-o-prefocus {
|
||||||
|
word-spacing: -0.43em;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="autogrid"]:after {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="autogrid"] > * {
|
||||||
|
display: inline-block;
|
||||||
|
*display: inline;
|
||||||
|
zoom: 1;
|
||||||
|
/* ie6 ie7 hack */
|
||||||
|
font-family: Helvetica, Arial, sans-serif;
|
||||||
|
letter-spacing: normal;
|
||||||
|
word-spacing: normal;
|
||||||
|
vertical-align: top;
|
||||||
|
text-rendering: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.autogrid2 > * {
|
||||||
|
width: 49%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.autogrid3 > * {
|
||||||
|
width: 32%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.autogrid4 > * {
|
||||||
|
width: 23.6%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.autogrid5 > * {
|
||||||
|
width: 19%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.autogrid6 > * {
|
||||||
|
width: 15%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.autogrid8 > * {
|
||||||
|
width: 10.8%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.autogrid10 > * {
|
||||||
|
width: 9%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.autogrid12 > * {
|
||||||
|
width: 6.4%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1280px) {
|
||||||
|
.autogrid5 > *,
|
||||||
|
.autogrid6 > *,
|
||||||
|
.autogrid8 > *,
|
||||||
|
.autogrid10 > *,
|
||||||
|
.autogrid12 > * {
|
||||||
|
width: 32%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.autogrid5 > *,
|
||||||
|
.autogrid6 > *,
|
||||||
|
.autogrid8 > *,
|
||||||
|
.autogrid10 > *,
|
||||||
|
.autogrid12 > * {
|
||||||
|
width: 49%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
[class*="autogrid"] > * {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
98
css/03-tables.css
Normal file
98
css/03-tables.css
Normal file
|
|
@ -0,0 +1,98 @@
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* ==tables */
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
table,
|
||||||
|
.table {
|
||||||
|
max-width: 100%;
|
||||||
|
table-layout: fixed;
|
||||||
|
border-collapse: collapse;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
|
||||||
|
table#recaptcha_table,
|
||||||
|
table.table-auto {
|
||||||
|
table-layout: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
caption {
|
||||||
|
padding: 10px;
|
||||||
|
color: #555;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr > * + * {
|
||||||
|
border-left: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
padding: .3em .8em;
|
||||||
|
text-align: left;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* alternate tables */
|
||||||
|
|
||||||
|
.alternate {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alternate tbody {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alternate thead tr > * + * {
|
||||||
|
border-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alternate tbody tr > * + * {
|
||||||
|
border-left: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* alternate-vert tables */
|
||||||
|
|
||||||
|
.alternate-vert {
|
||||||
|
border: 0;
|
||||||
|
border-right: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alternate-vert tr > :first-child {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.alternate-vert tr > * + * {
|
||||||
|
border-top: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* striped tables */
|
||||||
|
|
||||||
|
.striped tbody tr:nth-child(odd) {
|
||||||
|
background: #eee;
|
||||||
|
background: rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* striped-vert tables */
|
||||||
|
|
||||||
|
.striped-vert tr > :first-child {
|
||||||
|
background: #eee;
|
||||||
|
background: rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
103
css/04-forms.css
Normal file
103
css/04-forms.css
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* ==forms */
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* thanks to HTML5boilerplate,
|
||||||
|
* github.com/nathansmith/formalize
|
||||||
|
* and www.sitepen.com
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* buttons */
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* forms items */
|
||||||
|
|
||||||
|
form,
|
||||||
|
fieldset {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
select,
|
||||||
|
label,
|
||||||
|
.btn {
|
||||||
|
vertical-align: middle;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
border: 0;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
overflow: auto;
|
||||||
|
/* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
|
||||||
|
min-height: 5em;
|
||||||
|
vertical-align: top;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input[type="button"],
|
||||||
|
input[type="reset"],
|
||||||
|
input[type="submit"] {
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-appearance: button;
|
||||||
|
/* clickable input types in iOS */
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"],
|
||||||
|
input[type="radio"] {
|
||||||
|
padding: 0;
|
||||||
|
/* Corrects excess space around these inputs in IE8/9 */
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="search"] {
|
||||||
|
-webkit-appearance: textfield;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* if select styling bugs on WebKit */
|
||||||
|
|
||||||
|
/* 'x' appears on right of search input when text is entered. This removes it */
|
||||||
|
|
||||||
|
input[type="search"]::-webkit-search-decoration,
|
||||||
|
input[type="search"]::-webkit-search-cancel-button,
|
||||||
|
input[type="search"]::-webkit-search-results-button,
|
||||||
|
input[type="search"]::-webkit-search-results-decoration {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-input-placeholder {
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:-moz-placeholder,
|
||||||
|
textarea:-moz-placeholder {
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Removes inner padding and border in FF3+ */
|
||||||
|
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
input[type='button']::-moz-focus-inner,
|
||||||
|
input[type='reset']::-moz-focus-inner,
|
||||||
|
input[type='submit']::-moz-focus-inner {
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
165
css/05-icons.css
Normal file
165
css/05-icons.css
Normal file
|
|
@ -0,0 +1,165 @@
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* ==icons and bullets */
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon:before,
|
||||||
|
.icon.after:after {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
position: relative;
|
||||||
|
top: -0.1em;
|
||||||
|
margin: 0 0.3em 0 0;
|
||||||
|
font: 1.4em/1 sans-serif;
|
||||||
|
color: #000;
|
||||||
|
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
speak: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-device-width: 768px) {
|
||||||
|
.icon:before,
|
||||||
|
.icon.after:after {
|
||||||
|
font: 1em/0.6 sans-serif;
|
||||||
|
-webkit-transform: rotateZ(0.05deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon.after:after {
|
||||||
|
margin: 0 0 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon.after:before {
|
||||||
|
content: "" !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-rate:before,
|
||||||
|
.icon-rate.after:after {
|
||||||
|
content: "\2605";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-unrate:before,
|
||||||
|
.icon-unrate.after:after {
|
||||||
|
content: "\2606";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-check:before,
|
||||||
|
.icon-check.after:after {
|
||||||
|
content: "\2713";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-uncheck:before,
|
||||||
|
.icon-uncheck.after:after {
|
||||||
|
content: "\2717";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-cloud:before,
|
||||||
|
.icon-cloud.after:after {
|
||||||
|
content: "\2601";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-dl:before,
|
||||||
|
.icon-dl.after:after {
|
||||||
|
content: "\21E3";
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-cross:before,
|
||||||
|
.icon-cross.after:after {
|
||||||
|
content: "\2716";
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-arrow1:before,
|
||||||
|
.icon-arrow1.after:after {
|
||||||
|
content: "\2192";
|
||||||
|
position: relative;
|
||||||
|
top: -0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-arrow2:before,
|
||||||
|
.icon-arrow2.after:after {
|
||||||
|
content: "\279E";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-arrow3:before,
|
||||||
|
.icon-arrow3.after:after {
|
||||||
|
content: "\279A";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-bracket1:before,
|
||||||
|
.icon-bracket1.after:after {
|
||||||
|
content: "\2039";
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.6em;
|
||||||
|
position: relative;
|
||||||
|
top: -0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-bracket2:before,
|
||||||
|
.icon-bracket2.after:after {
|
||||||
|
content: "\203A";
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.6em;
|
||||||
|
position: relative;
|
||||||
|
top: -0.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-up:before,
|
||||||
|
.icon-up.after:after {
|
||||||
|
content: "\25B2";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-down:before,
|
||||||
|
.icon-down.after:after {
|
||||||
|
content: "\25BC";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-bull:before,
|
||||||
|
.icon-bull.after:after {
|
||||||
|
content: "\2022";
|
||||||
|
font-size: 1.2em;
|
||||||
|
top: -0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-bull2:before,
|
||||||
|
.icon-bull2.after:after {
|
||||||
|
content: "\25E6";
|
||||||
|
top: -0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-bull3:before,
|
||||||
|
.icon-bull3.after:after {
|
||||||
|
content: "\2023";
|
||||||
|
font-size: 1.6em;
|
||||||
|
top: -0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-nav:before,
|
||||||
|
.icon-nav.after:after {
|
||||||
|
content: "\2261";
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-losange:before,
|
||||||
|
.icon-losange.after:after {
|
||||||
|
content: "\25C6";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-asteri:before,
|
||||||
|
.icon-asteri.after:after {
|
||||||
|
content: "\2731";
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-mail:before,
|
||||||
|
.icon-mail.after:after {
|
||||||
|
content: "\2709";
|
||||||
|
font-size: 1.6em;
|
||||||
|
top: -0.05em;
|
||||||
|
}
|
||||||
300
css/06-rwd.css
Normal file
300
css/06-rwd.css
Normal file
|
|
@ -0,0 +1,300 @@
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* ==desktop and retina medias */
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
/* here go rules for big resources and big screens like: background-images, font-faces, etc. */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
|
||||||
|
/* Style adjustments for retina devices */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------------------------------- */
|
||||||
|
|
||||||
|
/* ==Responsive large / medium / tiny */
|
||||||
|
|
||||||
|
/* ---------------------------------- */
|
||||||
|
|
||||||
|
@media (min-width: 1280px) {
|
||||||
|
/* layouts for large screens */
|
||||||
|
|
||||||
|
.large-hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.large-visible {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.large-no-float {
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.large-inbl {
|
||||||
|
display: inline-block;
|
||||||
|
float: none;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.large-row {
|
||||||
|
display: table;
|
||||||
|
table-layout: fixed;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.large-col {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* widths for large screens */
|
||||||
|
|
||||||
|
.large-w25 {
|
||||||
|
width: 25% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.large-w33 {
|
||||||
|
width: 33.3333% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.large-w50 {
|
||||||
|
width: 50% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.large-w66 {
|
||||||
|
width: 66.6666% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.large-w75 {
|
||||||
|
width: 75% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.large-w100,
|
||||||
|
.large-wauto {
|
||||||
|
display: block !important;
|
||||||
|
float: none !important;
|
||||||
|
clear: none !important;
|
||||||
|
width: auto !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
margin-right: 0 !important;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* margins for large screens */
|
||||||
|
|
||||||
|
.large-ma0 {
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
/* quick reset in small resolution and less */
|
||||||
|
|
||||||
|
.w600p,
|
||||||
|
.w700p,
|
||||||
|
.w800p,
|
||||||
|
.w960p,
|
||||||
|
.mw960p {
|
||||||
|
width: auto;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* layouts for small screens */
|
||||||
|
|
||||||
|
.small-hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-visible {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-no-float {
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-inbl {
|
||||||
|
display: inline-block;
|
||||||
|
float: none;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-row {
|
||||||
|
display: table !important;
|
||||||
|
table-layout: fixed !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-col {
|
||||||
|
display: table-cell !important;
|
||||||
|
vertical-align: top !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* you shall not pass */
|
||||||
|
|
||||||
|
div,
|
||||||
|
textarea,
|
||||||
|
table,
|
||||||
|
td,
|
||||||
|
th,
|
||||||
|
code,
|
||||||
|
pre,
|
||||||
|
samp {
|
||||||
|
word-wrap: break-word;
|
||||||
|
-webkit-hyphens: auto;
|
||||||
|
-moz-hyphens: auto;
|
||||||
|
-ms-hyphens: auto;
|
||||||
|
hyphens: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* widths for small screens */
|
||||||
|
|
||||||
|
.small-w25 {
|
||||||
|
width: 25% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-w33 {
|
||||||
|
width: 33.3333% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-w50 {
|
||||||
|
width: 50% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-w66 {
|
||||||
|
width: 66.6666% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-w75 {
|
||||||
|
width: 75% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-w100,
|
||||||
|
.small-wauto {
|
||||||
|
display: block !important;
|
||||||
|
float: none !important;
|
||||||
|
clear: none !important;
|
||||||
|
width: auto !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
margin-right: 0 !important;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* margins for small screens */
|
||||||
|
|
||||||
|
.small-ma0 {
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
/* quick tiny resolution reset */
|
||||||
|
|
||||||
|
.mod,
|
||||||
|
.col,
|
||||||
|
fieldset {
|
||||||
|
display: block !important;
|
||||||
|
float: none !important;
|
||||||
|
clear: none !important;
|
||||||
|
width: auto !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
margin-right: 0 !important;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w300p,
|
||||||
|
.w400p,
|
||||||
|
.w500p {
|
||||||
|
width: auto;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: block !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* layouts for tiny screens */
|
||||||
|
|
||||||
|
.tiny-hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tiny-visible {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tiny-no-float {
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tiny-inbl {
|
||||||
|
display: inline-block;
|
||||||
|
float: none;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tiny-row {
|
||||||
|
display: table !important;
|
||||||
|
table-layout: fixed !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tiny-col {
|
||||||
|
display: table-cell !important;
|
||||||
|
vertical-align: top !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
display: block !important;
|
||||||
|
width: auto !important;
|
||||||
|
text-align: left !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
thead {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* widths for tiny screens */
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* margins for tiny screens */
|
||||||
|
|
||||||
|
.tiny-ma0 {
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
62
css/07-flexbox.css
Normal file
62
css/07-flexbox.css
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
/* flexbox layout
|
||||||
|
Tutorial: http://knacss.com/demos/tutoriel.html#flex */
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-h {
|
||||||
|
-webkit-box-orient: horizontal;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-webkit-flex-direction: row;
|
||||||
|
-moz-box-orient: horizontal;
|
||||||
|
-moz-box-direction: normal;
|
||||||
|
-ms-flex-direction: row;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-v {
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-webkit-flex-direction: column;
|
||||||
|
-moz-box-orient: vertical;
|
||||||
|
-moz-box-direction: normal;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-fluid {
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-webkit-flex: 1;
|
||||||
|
-moz-box-flex: 1;
|
||||||
|
-ms-flex: 1;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-start {
|
||||||
|
-webkit-box-ordinal-group: 0;
|
||||||
|
-webkit-order: -1;
|
||||||
|
-moz-box-ordinal-group: 0;
|
||||||
|
-ms-flex-order: -1;
|
||||||
|
order: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-mid {
|
||||||
|
-webkit-box-ordinal-group: 2;
|
||||||
|
-webkit-order: 1;
|
||||||
|
-moz-box-ordinal-group: 2;
|
||||||
|
-ms-flex-order: 1;
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-end {
|
||||||
|
-webkit-box-ordinal-group: 43;
|
||||||
|
-webkit-order: 42;
|
||||||
|
-moz-box-ordinal-group: 43;
|
||||||
|
-ms-flex-order: 42;
|
||||||
|
order: 42;
|
||||||
|
}
|
||||||
89
css/08-print.css
Normal file
89
css/08-print.css
Normal file
|
|
@ -0,0 +1,89 @@
|
||||||
|
/* quick print reset */
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
* {
|
||||||
|
background: transparent !important;
|
||||||
|
-webkit-box-shadow: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
text-shadow: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
width: auto !important;
|
||||||
|
margin: auto !important;
|
||||||
|
font-family: serif;
|
||||||
|
font-size: 12pt;
|
||||||
|
background-color: #fff !important;
|
||||||
|
color: #333 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
blockquote,
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
color: #000 !important;
|
||||||
|
margin: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.print {
|
||||||
|
display: block;
|
||||||
|
/* displaying .print elements */
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
-webkit-filter: grayscale(100%);
|
||||||
|
-moz-filter: grayscale(100%);
|
||||||
|
-ms-filter: grayscale(100%);
|
||||||
|
-o-filter: grayscale(100%);
|
||||||
|
filter: grayscale(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
blockquote {
|
||||||
|
orphans: 3;
|
||||||
|
/* no orphans */
|
||||||
|
widows: 3;
|
||||||
|
/* no widows */
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote,
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
page-break-inside: avoid;
|
||||||
|
/* no breaks inside these elements */
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
page-break-before: always;
|
||||||
|
/* page break before main headers */
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
caption {
|
||||||
|
page-break-after: avoid;
|
||||||
|
/* no breaks after these elements */
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #000 !important;
|
||||||
|
text-decoration: underline !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href]:after {
|
||||||
|
content: " (" attr(href) ")";
|
||||||
|
/* displaying URLs */
|
||||||
|
}
|
||||||
|
|
||||||
|
a[href^="javascript:"]:after,
|
||||||
|
a[href^="#"]:after {
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
}
|
||||||
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
1966
css/knacss.css
Normal file
1966
css/knacss.css
Normal file
File diff suppressed because it is too large
Load diff
55
gulpfile.js
55
gulpfile.js
|
|
@ -1,55 +0,0 @@
|
||||||
const gulp = require('gulp');
|
|
||||||
var sass = require('gulp-sass');
|
|
||||||
var postcss = require('gulp-postcss');
|
|
||||||
var CombineMQ = require('postcss-combine-media-query');
|
|
||||||
var autoprefixer = require('autoprefixer');
|
|
||||||
var CSSnano = require('cssnano');
|
|
||||||
|
|
||||||
gulp.task('css:full', () => {
|
|
||||||
return gulp.src('sass/knacss.scss')
|
|
||||||
.pipe(sass(
|
|
||||||
{
|
|
||||||
outputStyle: 'expanded'
|
|
||||||
}))
|
|
||||||
.pipe(
|
|
||||||
postcss([
|
|
||||||
autoprefixer, // ajoute les préfixes vendeurs
|
|
||||||
]))
|
|
||||||
.pipe(gulp.dest('css/knacss-full'));
|
|
||||||
});
|
|
||||||
|
|
||||||
gulp.task('css:mini', () => {
|
|
||||||
return gulp.src('sass/knacss.scss')
|
|
||||||
.pipe(sass(
|
|
||||||
{
|
|
||||||
outputStyle: 'compact'
|
|
||||||
}))
|
|
||||||
.pipe(
|
|
||||||
postcss([
|
|
||||||
CombineMQ, // rassemble les Media Queries (parfait pour les classes utilitaires)
|
|
||||||
autoprefixer, // ajoute les préfixes vendeurs
|
|
||||||
CSSnano // minification
|
|
||||||
]))
|
|
||||||
.pipe(gulp.dest('css/knacss-mini'));
|
|
||||||
});
|
|
||||||
|
|
||||||
gulp.task('css:grillade', () => {
|
|
||||||
return gulp.src('sass/utils/grillade.scss')
|
|
||||||
.pipe(sass(
|
|
||||||
{
|
|
||||||
outputStyle: 'compact'
|
|
||||||
}))
|
|
||||||
.pipe(
|
|
||||||
postcss([
|
|
||||||
CombineMQ, // rassemble les Media Queries (parfait pour les classes utilitaires)
|
|
||||||
autoprefixer, // ajoute les préfixes vendeurs
|
|
||||||
CSSnano // minification
|
|
||||||
]))
|
|
||||||
.pipe(gulp.dest('css/grillade'));
|
|
||||||
});
|
|
||||||
|
|
||||||
// Tâche BUILD : tapez "gulp" ou "gulp build"
|
|
||||||
gulp.task('build', gulp.series('css:full', 'css:mini', 'css:grillade'));
|
|
||||||
|
|
||||||
// Tâche par défaut
|
|
||||||
gulp.task('default', gulp.series('build'));
|
|
||||||
47
less/00-config.less
Normal file
47
less/00-config.less
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
// Config file : variables, mixins, ...
|
||||||
|
|
||||||
|
// LESS values : adapt them to your design
|
||||||
|
@basefont : 14px; // if "14px" then 1em = 14px
|
||||||
|
@lh : 1.5; // equiv line-height 1.5em
|
||||||
|
@h1-size : 32px; // equiv "32px"
|
||||||
|
@h2-size : 28px; // equiv "28px"
|
||||||
|
@h3-size : 24px; // equiv "24px"
|
||||||
|
@h4-size : 20px; // equiv "20px"
|
||||||
|
@h5-size : 18px; // equiv "18px"
|
||||||
|
@h6-size : 16px; // equiv "16px"
|
||||||
|
@basecolor : #000; // text color on body
|
||||||
|
@basebg : #fff; // body background color
|
||||||
|
@basecolor-link : #333; // primary links color;
|
||||||
|
@basecolor-link-hover : #000; // primary hovered/focused links color;
|
||||||
|
@smallvalue : 10px; // small value for margins / paddings
|
||||||
|
@mediumvalue : 20px; // medium value for margins / paddings
|
||||||
|
@largevalue : 30px; // large value for margins / paddings
|
||||||
|
@tinyscreen : 480px; // tiny screens media query
|
||||||
|
@smallscreen : 768px; // small screens media query
|
||||||
|
@largescreen : 1280px; // large screens media query
|
||||||
|
@gutter : 20px; // gutter value (%, px, em, rem, etc) for grid layouts
|
||||||
|
@fontstack1 : Helvetica, Arial, sans-serif; // common font
|
||||||
|
@fontstack2 : Consolas, 'DejaVu Sans Mono', Courier, monospace; // monospace font
|
||||||
|
@fontstack3 : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack
|
||||||
|
|
||||||
|
// LESS mixins : don't touch or you'll be banned ;)
|
||||||
|
// px to em/rem
|
||||||
|
.rem(@size, @bf: @basefont){
|
||||||
|
@rem: @size / 10;
|
||||||
|
font-size: unit(@rem, rem);
|
||||||
|
}
|
||||||
|
.em(@size, @bf: @basefont){
|
||||||
|
@em: @size / @bf;
|
||||||
|
font-size: unit(@em, em);
|
||||||
|
}
|
||||||
|
// flow for headings
|
||||||
|
.flow(@size, @bf: @basefont, @bh: @lh) {
|
||||||
|
@marg: @bh * @bf / @size;
|
||||||
|
@mt: unit(@marg,em);
|
||||||
|
margin-top: @mt;
|
||||||
|
margin-bottom: 0;
|
||||||
|
@rem: @size / 10;
|
||||||
|
font-size: unit(@rem, rem);
|
||||||
|
@coef: ceil(1/@mt);
|
||||||
|
line-height: unit((@mt * @coef));
|
||||||
|
}
|
||||||
496
less/01-base.less
Normal file
496
less/01-base.less
Normal file
|
|
@ -0,0 +1,496 @@
|
||||||
|
@import "00-config";
|
||||||
|
/*!
|
||||||
|
* www.KNACSS.com V2.9.3 (2014-02) @author: Raphael Goetter, Alsacreations
|
||||||
|
* Licence WTFPL http://www.wtfpl.net/
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
/* == soft reset */
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* switching box model for all elements */
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* soft reset */
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
padding-left: 2em;
|
||||||
|
}
|
||||||
|
ul.unstyled {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
vertical-align: middle;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
audio,
|
||||||
|
canvas,
|
||||||
|
video {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
svg:not(:root) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
figure {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
/* == typography */
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* base font-size corresponds to 10px and is adapted to rem unit */
|
||||||
|
html {
|
||||||
|
font-size: 62.5%;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
-ms-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background-color: @basebg;
|
||||||
|
color: @basecolor;
|
||||||
|
font-family: @fontstack1;
|
||||||
|
font-size: unit((@basefont / 10), em);
|
||||||
|
line-height: @lh; // adapt to your design
|
||||||
|
}
|
||||||
|
|
||||||
|
/* font-sizing for content */
|
||||||
|
/* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
|
||||||
|
p,
|
||||||
|
ul,
|
||||||
|
ol,
|
||||||
|
dl,
|
||||||
|
blockquote,
|
||||||
|
pre,
|
||||||
|
td,
|
||||||
|
th,
|
||||||
|
label,
|
||||||
|
textarea,
|
||||||
|
caption,
|
||||||
|
details,
|
||||||
|
figure,
|
||||||
|
hgroup {
|
||||||
|
margin-top: .75em;
|
||||||
|
margin-bottom: 0;
|
||||||
|
line-height: @lh;
|
||||||
|
}
|
||||||
|
h1, .h1-like {
|
||||||
|
.flow(@h1-size);
|
||||||
|
}
|
||||||
|
h2, .h2-like {
|
||||||
|
.flow(@h2-size);
|
||||||
|
}
|
||||||
|
h3, .h3-like {
|
||||||
|
.flow(@h3-size);
|
||||||
|
}
|
||||||
|
h4, .h4-like {
|
||||||
|
.flow(@h4-size);
|
||||||
|
}
|
||||||
|
h5, .h5-like {
|
||||||
|
.flow(@h5-size);
|
||||||
|
}
|
||||||
|
h6, .h6-like {
|
||||||
|
.flow(@h6-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* alternate font-sizing */
|
||||||
|
.smaller {
|
||||||
|
.em(@basefont - 4);
|
||||||
|
}
|
||||||
|
.small {
|
||||||
|
.em(@basefont - 2);
|
||||||
|
}
|
||||||
|
.big {
|
||||||
|
.em(@basefont + 2);
|
||||||
|
}
|
||||||
|
.bigger {
|
||||||
|
.em(@basefont + 4);
|
||||||
|
}
|
||||||
|
.biggest {
|
||||||
|
.em(@basefont + 6);
|
||||||
|
}
|
||||||
|
|
||||||
|
code,
|
||||||
|
pre,
|
||||||
|
samp,
|
||||||
|
kbd {
|
||||||
|
white-space: pre-line; /* IE fix */
|
||||||
|
white-space: pre-wrap;
|
||||||
|
font-family: @fontstack2;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
code, kbd, mark {
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
em {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
strong {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
kbd {
|
||||||
|
padding: 0 2px;
|
||||||
|
border: 1px solid #999;
|
||||||
|
}
|
||||||
|
code {
|
||||||
|
padding: 2px 4px;
|
||||||
|
background: rgba(0,0,0,.04);
|
||||||
|
color: #b11;
|
||||||
|
}
|
||||||
|
mark {
|
||||||
|
padding:2px 4px;
|
||||||
|
background: #ff0;
|
||||||
|
}
|
||||||
|
sup,
|
||||||
|
sub {
|
||||||
|
vertical-align: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
sup {
|
||||||
|
bottom: 1ex;
|
||||||
|
}
|
||||||
|
sub {
|
||||||
|
top: .5ex;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
/* == hiding content */
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* hiding content */
|
||||||
|
.visually-hidden {
|
||||||
|
position: absolute;
|
||||||
|
left: -7000px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
[dir=rtl] .visually-hidden {
|
||||||
|
left: auto;
|
||||||
|
right: -7000px;
|
||||||
|
}
|
||||||
|
.desktop-hidden { display: none; } /* hidden on desktop */
|
||||||
|
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
/* == skip links styling */
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
.skip-links {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
a {
|
||||||
|
position: absolute;
|
||||||
|
left: -7000px;
|
||||||
|
padding: 0.5em;
|
||||||
|
background: black;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
/* == browsers consistency */
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* avoid top margins on first content element */
|
||||||
|
p, ul, ol, dl,
|
||||||
|
blockquote, pre,
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
&:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* avoid margins on nested elements */
|
||||||
|
li p,
|
||||||
|
li ul,
|
||||||
|
li ol {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* max values */
|
||||||
|
img, table, td, blockquote, code, pre, textarea, input, video {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* margin-bottom on tables */
|
||||||
|
table { margin-bottom: 1.5em; }
|
||||||
|
|
||||||
|
/* Google Gmap3 bug fix on images */
|
||||||
|
:not(.gm-style) img {
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
.ie678 .gm-style img {
|
||||||
|
height: 100%; /* IE678 hack */
|
||||||
|
}
|
||||||
|
.gm-style img,
|
||||||
|
.gmnoscreen img,
|
||||||
|
.gmnoprint img {
|
||||||
|
max-width: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* scripts */
|
||||||
|
body > script {display: none !important;}
|
||||||
|
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
/* ==layout and modules */
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* float layout */
|
||||||
|
/* module, gains superpower "BFC" Block Formating Context */
|
||||||
|
.mod {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* blocks that needs to be placed under floats */
|
||||||
|
.clear,
|
||||||
|
.line,
|
||||||
|
.row {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* blocks that must contain floats */
|
||||||
|
.clearfix:after,
|
||||||
|
.line:after,
|
||||||
|
.mod:after {
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* table layout */
|
||||||
|
.row {
|
||||||
|
display: table;
|
||||||
|
table-layout: fixed;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.row > *,
|
||||||
|
.col {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* inline-block */
|
||||||
|
.inbl {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* alignments (blocks and inline) */
|
||||||
|
/* ------------------------------ */
|
||||||
|
|
||||||
|
/* left elements */
|
||||||
|
.left {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
img.left {
|
||||||
|
margin-right: 1em;
|
||||||
|
}
|
||||||
|
/* right elements */
|
||||||
|
.right {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
img.right {
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
img.left, img.right {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.center { margin-left: auto; margin-right: auto; }
|
||||||
|
.txtleft { text-align: left; }
|
||||||
|
.txtright { text-align: right; }
|
||||||
|
.txtcenter { text-align: center; }
|
||||||
|
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
/* == width helpers */
|
||||||
|
/* .. use only when needed */
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* blocks widths (percentage and pixels) */
|
||||||
|
.w10 { width: 10%; }
|
||||||
|
.w20 { width: 20%; }
|
||||||
|
.w25 { width: 25%; }
|
||||||
|
.w30 { width: 30%; }
|
||||||
|
.w33 { width: 33.3333%; }
|
||||||
|
.w40 { width: 40%; }
|
||||||
|
.w50 { width: 50%; }
|
||||||
|
.w60 { width: 60%; }
|
||||||
|
.w66 { width: 66.6666%; }
|
||||||
|
.w70 { width: 70%; }
|
||||||
|
.w75 { width: 75%; }
|
||||||
|
.w80 { width: 80%; }
|
||||||
|
.w90 { width: 90%; }
|
||||||
|
.w100 { width: 100%; }
|
||||||
|
|
||||||
|
.w50p { width: 50px; }
|
||||||
|
.w100p { width: 100px; }
|
||||||
|
.w150p { width: 150px; }
|
||||||
|
.w200p { width: 200px; }
|
||||||
|
.w300p { width: 300px; }
|
||||||
|
.w400p { width: 400px; }
|
||||||
|
.w500p { width: 500px; }
|
||||||
|
.w600p { width: 600px; }
|
||||||
|
.w700p { width: 700px; }
|
||||||
|
.w800p { width: 800px; }
|
||||||
|
.w960p { width: 960px; }
|
||||||
|
.mw960p { max-width: 960px; }
|
||||||
|
.w1140p { width: 1140px; }
|
||||||
|
.mw1140p { max-width: 1140px; }
|
||||||
|
.wauto { width: auto; }
|
||||||
|
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
/* == spacing helpers */
|
||||||
|
/* .. use only when needed */
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* spacing helpers
|
||||||
|
p,m = padding,margin
|
||||||
|
a,t,r,b,l = all,top,right,bottom,left
|
||||||
|
s,m,l,n = small(10px),medium(20px),large(30px),none(0)
|
||||||
|
source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
|
||||||
|
*/
|
||||||
|
.m-reset, .ma0 { margin: 0; }
|
||||||
|
.p-reset, .pa0 { padding: 0; }
|
||||||
|
.ma1, .mas { margin: @smallvalue; }
|
||||||
|
.ma2, .mam { margin: @mediumvalue; }
|
||||||
|
.ma3, .mal { margin: @largevalue; }
|
||||||
|
.pa1, .pas { padding: @smallvalue; }
|
||||||
|
.pa2, .pam { padding: @mediumvalue; }
|
||||||
|
.pa3, .pal { padding: @largevalue; }
|
||||||
|
|
||||||
|
.mt0, .mtn { margin-top: 0; }
|
||||||
|
.mt1, .mts { margin-top: @smallvalue; }
|
||||||
|
.mt2, .mtm { margin-top: @mediumvalue; }
|
||||||
|
.mt3, .mtl { margin-top: @largevalue; }
|
||||||
|
.mr0, .mrn { margin-right: 0; }
|
||||||
|
.mr1, .mrs { margin-right: @smallvalue; }
|
||||||
|
.mr2, .mrm { margin-right: @mediumvalue; }
|
||||||
|
.mr3, .mrl { margin-right: @largevalue; }
|
||||||
|
.mb0, .mbn { margin-bottom: 0; }
|
||||||
|
.mb1, .mbs { margin-bottom: @smallvalue; }
|
||||||
|
.mb2, .mbm { margin-bottom: @mediumvalue; }
|
||||||
|
.mb3, .mbl { margin-bottom: @largevalue; }
|
||||||
|
.ml0, .mln { margin-left: 0; }
|
||||||
|
.ml1, .mls { margin-left: @smallvalue; }
|
||||||
|
.ml2, .mlm { margin-left: @mediumvalue; }
|
||||||
|
.ml3, .mll { margin-left: @largevalue; }
|
||||||
|
|
||||||
|
.pt0, .ptn { padding-top: 0; }
|
||||||
|
.pt1, .pts { padding-top: @smallvalue; }
|
||||||
|
.pt2, .ptm { padding-top: @mediumvalue; }
|
||||||
|
.pt3, .ptl { padding-top: @largevalue; }
|
||||||
|
.pr0, .prn { padding-right: 0; }
|
||||||
|
.pr1, .prs { padding-right: @smallvalue; }
|
||||||
|
.pr2, .prm { padding-right: @mediumvalue; }
|
||||||
|
.pr3, .prl { padding-right: @largevalue; }
|
||||||
|
.pb0, .pbn { padding-bottom: 0; }
|
||||||
|
.pb1, .pbs { padding-bottom: @smallvalue; }
|
||||||
|
.pb2, .pbm { padding-bottom: @mediumvalue; }
|
||||||
|
.pb3, .pbl { padding-bottom: @largevalue; }
|
||||||
|
.pl0, .pln { padding-left: 0; }
|
||||||
|
.pl1, .pls { padding-left: @smallvalue; }
|
||||||
|
.pl2, .plm { padding-left: @mediumvalue; }
|
||||||
|
.pl3, .pll { padding-left: @largevalue; }
|
||||||
|
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
/* == iefix */
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* Make sure you are using Conditional Classes in your HTML */
|
||||||
|
/* see : http://www.alsacreations.com/astuce/lire/988-classes-conditionnelles-HTML.html */
|
||||||
|
|
||||||
|
.ie678 h1, .ie678 .h1-like {
|
||||||
|
.em(@h1-size);
|
||||||
|
}
|
||||||
|
.ie678 h2, .ie678 .h2-like {
|
||||||
|
.em(@h2-size);
|
||||||
|
}
|
||||||
|
.ie678 h3, .ie678 .h3-like {
|
||||||
|
.em(@h3-size);
|
||||||
|
}
|
||||||
|
.ie678 h4, .ie678 .h4-like {
|
||||||
|
.em(@h4-size);
|
||||||
|
}
|
||||||
|
.ie678 h5, .ie678 .h5-like {
|
||||||
|
.em(@h5-size);
|
||||||
|
}
|
||||||
|
.ie678 h6, .ie678 .h6-like {
|
||||||
|
.em(@h6-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* hasLayout for IE6/IE7 */
|
||||||
|
.ie67 .clearfix,
|
||||||
|
.ie67 .line,
|
||||||
|
.ie67 .mod,
|
||||||
|
.ie67 .row,
|
||||||
|
.ie67 .col {
|
||||||
|
zoom: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* inline-block and table-cell for IE6/IE7 */
|
||||||
|
/* warning: .col needs width on IE6/IE7 */
|
||||||
|
.ie67 .btn,
|
||||||
|
.ie67 .col,
|
||||||
|
.ie67 .inbl {
|
||||||
|
display: inline;
|
||||||
|
zoom: 1;
|
||||||
|
}
|
||||||
|
.ie8 img {
|
||||||
|
width: auto; /* @bugfix for IE8 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Active box-sizing for IE6/IE7 */
|
||||||
|
/* @source https://github.com/Schepp/box-sizing-polyfill */
|
||||||
|
/*
|
||||||
|
.ie67 * {
|
||||||
|
behavior: url(/lib/box-sizing-polyfill/boxsizing.htc);
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
/* == quick print reset */
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
p,
|
||||||
|
blockquote {
|
||||||
|
orphans: 2;
|
||||||
|
widows: 2;
|
||||||
|
}
|
||||||
|
blockquote,
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
page-break-inside: avoid;
|
||||||
|
}
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
caption {
|
||||||
|
page-break-after: avoid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* debug helper */
|
||||||
|
.knacss-debug {
|
||||||
|
background: pink;
|
||||||
|
outline: 3px solid maroon;
|
||||||
|
}
|
||||||
140
less/02-grids.less
Normal file
140
less/02-grids.less
Normal file
|
|
@ -0,0 +1,140 @@
|
||||||
|
@import "00-config";
|
||||||
|
|
||||||
|
/* ---------------------------------- */
|
||||||
|
/* ==classic grids */
|
||||||
|
/* .. use it when gutter size matters */
|
||||||
|
/* ---------------------------------- */
|
||||||
|
|
||||||
|
/* grids inspired from SUIT https://github.com/suitcss/suit */
|
||||||
|
/* font-family hack explained here : https://github.com/raphaelgoetter/KNACSS/issues/37 */
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
overflow: hidden;
|
||||||
|
font-family: @fontstack3;
|
||||||
|
}
|
||||||
|
.grid > * {
|
||||||
|
display: block;
|
||||||
|
padding: 0;
|
||||||
|
margin-left: -@gutter; /* gutter value */
|
||||||
|
text-align: left;
|
||||||
|
letter-spacing: -0.31em;
|
||||||
|
text-rendering: optimizespeed;
|
||||||
|
}
|
||||||
|
/* Opera hack */
|
||||||
|
.opera:-o-prefocus,
|
||||||
|
.grid > * {
|
||||||
|
word-spacing: -0.43em;
|
||||||
|
}
|
||||||
|
.grid > * > * {
|
||||||
|
display: inline-block;
|
||||||
|
*display: inline; *zoom: 1; /* IE67 hack */
|
||||||
|
width: 100%;
|
||||||
|
padding-left: @gutter; /* gutter value */
|
||||||
|
margin-left: 0;
|
||||||
|
vertical-align: top;
|
||||||
|
text-align: left;
|
||||||
|
letter-spacing: normal;
|
||||||
|
word-spacing: normal;
|
||||||
|
text-rendering: auto;
|
||||||
|
font-family: @fontstack1;
|
||||||
|
}
|
||||||
|
.grid2 > * {width: 50%;}
|
||||||
|
.grid3 > * {width: 33.333%;}
|
||||||
|
.grid4 > * {width: 25%;}
|
||||||
|
.grid5 > * {width: 20%;}
|
||||||
|
.grid6 > * {width: 16.667%;}
|
||||||
|
.grid8 > * {width: 12.5%;}
|
||||||
|
.grid10 > * {width: 10%;}
|
||||||
|
.grid12 > * {width: 8.333%;}
|
||||||
|
|
||||||
|
/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */
|
||||||
|
.grid2-1 > *:first-child,
|
||||||
|
.grid1-2 > * + * { width: 66.666%; }
|
||||||
|
.grid1-2 > *:first-child,
|
||||||
|
.grid2-1 > * + * { width: 33.333%; }
|
||||||
|
.grid1-3 > *:first-child,
|
||||||
|
.grid3-1 > * + * { width: 25%; }
|
||||||
|
.grid3-1 > *:first-child,
|
||||||
|
.grid1-3 > * + * { width: 75%; }
|
||||||
|
|
||||||
|
/* Responsiv-o-matic */
|
||||||
|
@media (max-width: @largescreen) {
|
||||||
|
.grid5 > *,
|
||||||
|
.grid6 > *,
|
||||||
|
.grid8 > *,
|
||||||
|
.grid10 > *,
|
||||||
|
.grid12 > * {width: 33.333%}
|
||||||
|
}
|
||||||
|
@media (max-width: @smallscreen) {
|
||||||
|
.grid3 > *,
|
||||||
|
.grid4 > *,
|
||||||
|
.grid5 > *,
|
||||||
|
.grid6 > *,
|
||||||
|
.grid8 > *,
|
||||||
|
.grid10 > *,
|
||||||
|
.grid12 > * {width: 50%}
|
||||||
|
}
|
||||||
|
@media (max-width: @tinyscreen) {
|
||||||
|
.grid > * > * {width: 100% !important}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* ---------------------------------- */
|
||||||
|
/* ==autogrids */
|
||||||
|
/* .. to automatically justify blocs */
|
||||||
|
/* ---------------------------------- */
|
||||||
|
|
||||||
|
/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
|
||||||
|
|
||||||
|
[class*="autogrid"] {
|
||||||
|
text-align: justify;
|
||||||
|
font-family: @fontstack3;
|
||||||
|
letter-spacing: -0.31em;
|
||||||
|
text-rendering: optimizespeed;
|
||||||
|
}
|
||||||
|
/* Opera hack */
|
||||||
|
[class*="autogrid"]:-o-prefocus {
|
||||||
|
word-spacing: -0.43em;
|
||||||
|
}
|
||||||
|
[class*="autogrid"]:after {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
[class*="autogrid"] > * {
|
||||||
|
display: inline-block;
|
||||||
|
*display: inline; zoom: 1; /* ie6 ie7 hack */
|
||||||
|
font-family: @fontstack1;
|
||||||
|
letter-spacing: normal;
|
||||||
|
word-spacing: normal;
|
||||||
|
vertical-align: top;
|
||||||
|
text-rendering: auto;
|
||||||
|
}
|
||||||
|
.autogrid2 > * {width: 49%}
|
||||||
|
.autogrid3 > * {width: 32%}
|
||||||
|
.autogrid4 > * {width: 23.6%}
|
||||||
|
.autogrid5 > * {width: 19%}
|
||||||
|
.autogrid6 > * {width: 15%}
|
||||||
|
.autogrid8 > * {width: 10.8%}
|
||||||
|
.autogrid10 > * {width: 9%}
|
||||||
|
.autogrid12 > * {width: 6.4%}
|
||||||
|
|
||||||
|
@media (max-width: @largescreen) {
|
||||||
|
.autogrid5 > *,
|
||||||
|
.autogrid6 > *,
|
||||||
|
.autogrid8 > *,
|
||||||
|
.autogrid10 > *,
|
||||||
|
.autogrid12 > * {width: 32%}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: @smallscreen) {
|
||||||
|
.autogrid5 > *,
|
||||||
|
.autogrid6 > *,
|
||||||
|
.autogrid8 > *,
|
||||||
|
.autogrid10 > *,
|
||||||
|
.autogrid12 > * {width: 49%}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: @tinyscreen) {
|
||||||
|
[class*="autogrid"] > * {width: 100%}
|
||||||
|
}
|
||||||
78
less/03-tables.less
Normal file
78
less/03-tables.less
Normal file
|
|
@ -0,0 +1,78 @@
|
||||||
|
@import "00-config";
|
||||||
|
/* ----------------------------- */
|
||||||
|
/* ==tables */
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
table,
|
||||||
|
.table {
|
||||||
|
max-width : 100%;
|
||||||
|
table-layout: fixed;
|
||||||
|
border-collapse: collapse;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.table {
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
table#recaptcha_table,
|
||||||
|
table.table-auto {
|
||||||
|
table-layout:auto;
|
||||||
|
}
|
||||||
|
caption {
|
||||||
|
padding: 10px;
|
||||||
|
color: #555;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
tr > * + * {
|
||||||
|
border-left: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
padding: .3em .8em;
|
||||||
|
text-align: left;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* alternate tables */
|
||||||
|
.alternate { border: 0; }
|
||||||
|
.alternate tbody {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
.alternate thead tr > * + * {
|
||||||
|
border-left: 0;
|
||||||
|
}
|
||||||
|
.alternate tbody tr > * + * {
|
||||||
|
border-left: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* alternate-vert tables */
|
||||||
|
.alternate-vert {
|
||||||
|
border: 0;
|
||||||
|
border-right: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
.alternate-vert tr > :first-child {
|
||||||
|
border-bottom: 0;
|
||||||
|
}
|
||||||
|
.alternate-vert tr > * + * {
|
||||||
|
border-top: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* striped tables */
|
||||||
|
.striped tbody tr:nth-child(odd) {
|
||||||
|
background: #eee;
|
||||||
|
background: rgba(0, 0, 0, .05);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* striped-vert tables */
|
||||||
|
.striped-vert tr > :first-child {
|
||||||
|
background: #eee;
|
||||||
|
background: rgba(0, 0, 0, .05);
|
||||||
|
}
|
||||||
87
less/04-forms.less
Normal file
87
less/04-forms.less
Normal file
|
|
@ -0,0 +1,87 @@
|
||||||
|
@import "00-config";
|
||||||
|
/* ----------------------------- */
|
||||||
|
/* ==forms */
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* thanks to HTML5boilerplate,
|
||||||
|
* github.com/nathansmith/formalize
|
||||||
|
* and www.sitepen.com
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* buttons */
|
||||||
|
.btn {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* forms items */
|
||||||
|
form,
|
||||||
|
fieldset {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
select,
|
||||||
|
label,
|
||||||
|
.btn {
|
||||||
|
vertical-align: middle;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
legend {
|
||||||
|
border: 0;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
overflow: auto; /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
|
||||||
|
min-height: 5em;
|
||||||
|
vertical-align: top;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
button,
|
||||||
|
input[type="button"],
|
||||||
|
input[type="reset"],
|
||||||
|
input[type="submit"] {
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-appearance: button; /* clickable input types in iOS */
|
||||||
|
}
|
||||||
|
input[type="checkbox"],
|
||||||
|
input[type="radio"] {
|
||||||
|
padding: 0; /* Corrects excess space around these inputs in IE8/9 */
|
||||||
|
}
|
||||||
|
input[type="search"] {
|
||||||
|
-webkit-appearance: textfield;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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,
|
||||||
|
input[type="search"]::-webkit-search-cancel-button,
|
||||||
|
input[type="search"]::-webkit-search-results-button,
|
||||||
|
input[type="search"]::-webkit-search-results-decoration {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
::-webkit-input-placeholder {
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
input:-moz-placeholder,
|
||||||
|
textarea:-moz-placeholder {
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Removes inner padding and border in FF3+ */
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
input[type='button']::-moz-focus-inner,
|
||||||
|
input[type='reset']::-moz-focus-inner,
|
||||||
|
input[type='submit']::-moz-focus-inner {
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
139
less/05-icons.less
Normal file
139
less/05-icons.less
Normal file
|
|
@ -0,0 +1,139 @@
|
||||||
|
@import "00-config";
|
||||||
|
/* ----------------------------- */
|
||||||
|
/* ==icons and bullets */
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
.icon {display: inline-block;}
|
||||||
|
|
||||||
|
.icon:before,
|
||||||
|
.icon.after:after {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
position: relative; top: -.1em;
|
||||||
|
margin: 0 0.3em 0 0;
|
||||||
|
font: 1.4em/1 sans-serif;
|
||||||
|
color: #000;
|
||||||
|
text-shadow: 1px 1px 0 rgba(0,0,0,.1);
|
||||||
|
speak: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-device-width: @smallscreen) {
|
||||||
|
.icon:before,
|
||||||
|
.icon.after:after {
|
||||||
|
font: 1em/0.6 sans-serif;
|
||||||
|
-webkit-transform: rotateZ(0.05deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon.after:after {
|
||||||
|
margin: 0 0 0 8px;
|
||||||
|
}
|
||||||
|
.icon.after:before {
|
||||||
|
content: "" !important
|
||||||
|
}
|
||||||
|
.icon-rate:before,
|
||||||
|
.icon-rate.after:after {
|
||||||
|
content: "\2605";
|
||||||
|
}
|
||||||
|
.icon-unrate:before,
|
||||||
|
.icon-unrate.after:after{
|
||||||
|
content: "\2606";
|
||||||
|
}
|
||||||
|
.icon-check:before,
|
||||||
|
.icon-check.after:after{
|
||||||
|
content: "\2713";
|
||||||
|
}
|
||||||
|
.icon-uncheck:before,
|
||||||
|
.icon-uncheck.after:after{
|
||||||
|
content: "\2717";
|
||||||
|
}
|
||||||
|
.icon-cloud:before,
|
||||||
|
.icon-cloud.after:after {
|
||||||
|
content: "\2601";
|
||||||
|
}
|
||||||
|
.icon-dl:before,
|
||||||
|
.icon-dl.after:after {
|
||||||
|
content: "\21E3";
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.icon-cross:before,
|
||||||
|
.icon-cross.after:after {
|
||||||
|
content: "\2716";
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.icon-arrow1:before,
|
||||||
|
.icon-arrow1.after:after {
|
||||||
|
content: "\2192";
|
||||||
|
position: relative;
|
||||||
|
top: -0.15em;
|
||||||
|
}
|
||||||
|
.icon-arrow2:before,
|
||||||
|
.icon-arrow2.after:after {
|
||||||
|
content: "\279E";
|
||||||
|
}
|
||||||
|
.icon-arrow3:before,
|
||||||
|
.icon-arrow3.after:after {
|
||||||
|
content: "\279A";
|
||||||
|
}
|
||||||
|
.icon-bracket1:before,
|
||||||
|
.icon-bracket1.after:after {
|
||||||
|
content: "\2039";
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.6em;
|
||||||
|
position: relative;
|
||||||
|
top: -0.15em;
|
||||||
|
}
|
||||||
|
.icon-bracket2:before,
|
||||||
|
.icon-bracket2.after:after {
|
||||||
|
content: "\203A";
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.6em;
|
||||||
|
position: relative;
|
||||||
|
top: -0.15em;
|
||||||
|
}
|
||||||
|
.icon-up:before,
|
||||||
|
.icon-up.after:after {
|
||||||
|
content: "\25B2";
|
||||||
|
}
|
||||||
|
.icon-down:before,
|
||||||
|
.icon-down.after:after {
|
||||||
|
content: "\25BC";
|
||||||
|
}
|
||||||
|
.icon-bull:before,
|
||||||
|
.icon-bull.after:after {
|
||||||
|
content: "\2022";
|
||||||
|
font-size: 1.2em;
|
||||||
|
top: -0.05em;
|
||||||
|
}
|
||||||
|
.icon-bull2:before,
|
||||||
|
.icon-bull2.after:after {
|
||||||
|
content: "\25E6";
|
||||||
|
top: -0.05em;
|
||||||
|
}
|
||||||
|
.icon-bull3:before,
|
||||||
|
.icon-bull3.after:after{
|
||||||
|
content: "\2023";
|
||||||
|
font-size: 1.6em;
|
||||||
|
top: -0.05em;
|
||||||
|
}
|
||||||
|
.icon-nav:before,
|
||||||
|
.icon-nav.after:after {
|
||||||
|
content: "\2261";
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.icon-losange:before,
|
||||||
|
.icon-losange.after:after {
|
||||||
|
content: "\25C6";
|
||||||
|
}
|
||||||
|
.icon-asteri:before,
|
||||||
|
.icon-asteri.after:after {
|
||||||
|
content: "\2731";
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.icon-mail:before,
|
||||||
|
.icon-mail.after:after {
|
||||||
|
content: "\2709";
|
||||||
|
font-size: 1.6em;
|
||||||
|
top: -.05em;
|
||||||
|
}
|
||||||
185
less/06-rwd.less
Normal file
185
less/06-rwd.less
Normal file
|
|
@ -0,0 +1,185 @@
|
||||||
|
@import "00-config";
|
||||||
|
/* ----------------------------- */
|
||||||
|
/* ==desktop and retina medias */
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
@media (min-width: @smallscreen) {
|
||||||
|
/* here go rules for big resources and big screens like: background-images, font-faces, etc. */
|
||||||
|
}
|
||||||
|
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
|
||||||
|
/* Style adjustments for retina devices */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------------------------------- */
|
||||||
|
/* ==Responsive large / medium / tiny */
|
||||||
|
/* ---------------------------------- */
|
||||||
|
|
||||||
|
@media (min-width: @largescreen) {
|
||||||
|
|
||||||
|
/* layouts for large screens */
|
||||||
|
.large-hidden { display: none !important; }
|
||||||
|
.large-visible { display: block !important; }
|
||||||
|
.large-no-float {float: none; }
|
||||||
|
.large-inbl {
|
||||||
|
display: inline-block;
|
||||||
|
float: none;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.large-row {
|
||||||
|
display: table;
|
||||||
|
table-layout: fixed;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
.large-col {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* widths for large screens */
|
||||||
|
.large-w25 { width: 25% !important; }
|
||||||
|
.large-w33 { width: 33.3333% !important; }
|
||||||
|
.large-w50 { width: 50% !important; }
|
||||||
|
.large-w66 { width: 66.6666% !important; }
|
||||||
|
.large-w75 { width: 75% !important; }
|
||||||
|
.large-w100,
|
||||||
|
.large-wauto {
|
||||||
|
display: block !important;
|
||||||
|
float: none !important;
|
||||||
|
clear: none !important;
|
||||||
|
width: auto !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
margin-right: 0 !important;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* margins for large screens */
|
||||||
|
.large-ma0 { margin: 0 !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: @smallscreen) {
|
||||||
|
|
||||||
|
/* quick reset in small resolution and less */
|
||||||
|
.w600p,
|
||||||
|
.w700p,
|
||||||
|
.w800p,
|
||||||
|
.w960p,
|
||||||
|
.mw960p {
|
||||||
|
width: auto;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* layouts for small screens */
|
||||||
|
.small-hidden { display: none !important; }
|
||||||
|
.small-visible { display: block !important; }
|
||||||
|
.small-no-float {float: none; }
|
||||||
|
.small-inbl {
|
||||||
|
display: inline-block;
|
||||||
|
float: none;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.small-row {
|
||||||
|
display: table !important;
|
||||||
|
table-layout: fixed !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
.small-col {
|
||||||
|
display: table-cell !important;
|
||||||
|
vertical-align: top !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* you shall not pass */
|
||||||
|
div, textarea, table, td, th, code, pre, samp {
|
||||||
|
word-wrap: break-word;
|
||||||
|
hyphens: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* widths for small screens */
|
||||||
|
.small-w25 { width: 25% !important; }
|
||||||
|
.small-w33 { width: 33.3333% !important; }
|
||||||
|
.small-w50 { width: 50% !important; }
|
||||||
|
.small-w66 { width: 66.6666% !important; }
|
||||||
|
.small-w75 { width: 75% !important; }
|
||||||
|
.small-w100,
|
||||||
|
.small-wauto {
|
||||||
|
display: block !important;
|
||||||
|
float: none !important;
|
||||||
|
clear: none !important;
|
||||||
|
width: auto !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
margin-right: 0 !important;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
/* margins for small screens */
|
||||||
|
.small-ma0 { margin: 0 !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: @tinyscreen) {
|
||||||
|
|
||||||
|
/* quick tiny resolution reset */
|
||||||
|
.mod,
|
||||||
|
.col,
|
||||||
|
fieldset {
|
||||||
|
display: block !important;
|
||||||
|
float: none !important;
|
||||||
|
clear: none !important;
|
||||||
|
width: auto !important;
|
||||||
|
margin-left: 0 !important;
|
||||||
|
margin-right: 0 !important;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
.w300p,
|
||||||
|
.w400p,
|
||||||
|
.w500p {
|
||||||
|
width: auto;
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
.row {
|
||||||
|
display: block !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* layouts for tiny screens */
|
||||||
|
.tiny-hidden { display: none !important; }
|
||||||
|
.tiny-visible { display: block !important; }
|
||||||
|
.tiny-no-float {float: none;}
|
||||||
|
.tiny-inbl {
|
||||||
|
display: inline-block;
|
||||||
|
float: none;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.tiny-row {
|
||||||
|
display: table !important;
|
||||||
|
table-layout: fixed !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
.tiny-col {
|
||||||
|
display: table-cell !important;
|
||||||
|
vertical-align: top !important;
|
||||||
|
}
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
display: block !important;
|
||||||
|
width: auto !important;
|
||||||
|
text-align: left !important;
|
||||||
|
}
|
||||||
|
thead { display: none; }
|
||||||
|
|
||||||
|
/* widths for tiny screens */
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
/* margins for tiny screens */
|
||||||
|
.tiny-ma0 { margin: 0 !important; }
|
||||||
|
}
|
||||||
24
less/07-flexbox.less
Normal file
24
less/07-flexbox.less
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
@import "00-config";
|
||||||
|
/* flexbox layout
|
||||||
|
Tutorial: http://knacss.com/demos/tutoriel.html#flex */
|
||||||
|
.flex {
|
||||||
|
display : flex;
|
||||||
|
}
|
||||||
|
.flex-h {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
.flex-v {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.flex-fluid {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.flex-start {
|
||||||
|
order : -1;
|
||||||
|
}
|
||||||
|
.flex-mid {
|
||||||
|
order : 1;
|
||||||
|
}
|
||||||
|
.flex-end {
|
||||||
|
order : 42;
|
||||||
|
}
|
||||||
70
less/08-print.less
Normal file
70
less/08-print.less
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
@import "00-config";
|
||||||
|
/* quick print reset */
|
||||||
|
@media print {
|
||||||
|
* {
|
||||||
|
background: transparent !important;
|
||||||
|
box-shadow: none !important;
|
||||||
|
text-shadow: none !important;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
width: auto !important;
|
||||||
|
margin: auto !important;
|
||||||
|
font-family: serif;
|
||||||
|
font-size: 12pt;
|
||||||
|
background-color: #fff !important;
|
||||||
|
color: #333 !important;
|
||||||
|
}
|
||||||
|
p,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
blockquote,
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
color: #000 !important;
|
||||||
|
margin: auto !important;
|
||||||
|
}
|
||||||
|
.print {
|
||||||
|
display: block; /* displaying .print elements */
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
-webkit-filter: grayscale(100%);
|
||||||
|
-moz-filter: grayscale(100%);
|
||||||
|
-ms-filter: grayscale(100%);
|
||||||
|
-o-filter: grayscale(100%);
|
||||||
|
filter: grayscale(100%);
|
||||||
|
}
|
||||||
|
p,
|
||||||
|
blockquote {
|
||||||
|
orphans: 3; /* no orphans */
|
||||||
|
widows: 3; /* no widows */
|
||||||
|
}
|
||||||
|
blockquote,
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
page-break-inside: avoid; /* no breaks inside these elements */
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
page-break-before: always; /* page break before main headers */
|
||||||
|
}
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
caption {
|
||||||
|
page-break-after: avoid; /* no breaks after these elements */
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: #000 !important;
|
||||||
|
text-decoration: underline !important;
|
||||||
|
}
|
||||||
|
a[href]:after {
|
||||||
|
content: " (" attr(href) ")"; /* displaying URLs */
|
||||||
|
}
|
||||||
|
a[href^="javascript:"]:after,
|
||||||
|
a[href^="#"]:after {
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
less/knackLESS.zip
Normal file
BIN
less/knackLESS.zip
Normal file
Binary file not shown.
22
less/knacss.less
Normal file
22
less/knacss.less
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
// LESS config file
|
||||||
|
@import "00-config";
|
||||||
|
|
||||||
|
// LESS base styles
|
||||||
|
@import "01-base";
|
||||||
|
|
||||||
|
// LESS files : chose the ones you need
|
||||||
|
@import "02-grids";
|
||||||
|
@import "03-tables";
|
||||||
|
@import "04-forms";
|
||||||
|
@import "05-icons";
|
||||||
|
@import "06-rwd";
|
||||||
|
@import "07-flexbox";
|
||||||
|
@import "08-print";
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
/* ==own stylesheet */
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* Here should go your own CSS styles */
|
||||||
|
/* You can also link them with a LESS @import */
|
||||||
|
/* @import "my-styles.less"; */
|
||||||
37
package.json
37
package.json
|
|
@ -1,37 +0,0 @@
|
||||||
{
|
|
||||||
"name": "knacss",
|
|
||||||
"version": "8.2.1",
|
|
||||||
"homepage": "http://www.knacss.com/",
|
|
||||||
"bugs": "https://github.com/alsacreations/KNACSS/issues",
|
|
||||||
"author": "Raphaël GOETTER, Alsacreations (http://www.alsacreations.fr)",
|
|
||||||
"contributors": [
|
|
||||||
"Raphaël GOETTER, Alsacreations"
|
|
||||||
],
|
|
||||||
"description": "KNACSS is a minimalist, responsive and extensible style sheet to kick-start your HTML / CSS projects. It relies on common best practices and experience on the topic.",
|
|
||||||
"main": "https://github.com/alsacreations/KNACSS/tree/master/css",
|
|
||||||
"keywords": [
|
|
||||||
"css",
|
|
||||||
"framework",
|
|
||||||
"reset",
|
|
||||||
"responsive",
|
|
||||||
"sass",
|
|
||||||
"rwd",
|
|
||||||
"boilerplate",
|
|
||||||
"workflow"
|
|
||||||
],
|
|
||||||
"repository": {
|
|
||||||
"type": "git",
|
|
||||||
"url": "https://github.com/alsacreations/KNACSS"
|
|
||||||
},
|
|
||||||
"license": "WTFPL",
|
|
||||||
"devDependencies": {
|
|
||||||
"gulp": "^4.0.2",
|
|
||||||
"gulp-postcss": "^8.0.0",
|
|
||||||
"gulp-sass": "^4.1.0"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"autoprefixer": "^9.7.1",
|
|
||||||
"postcss-combine-media-query": "^1.0.1",
|
|
||||||
"cssnano": "^4.1.10"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
// Respond-to mixin
|
|
||||||
// ex. @include respond-to("medium-up") {...}
|
|
||||||
|
|
||||||
$bp-aliases: (
|
|
||||||
"small": (
|
|
||||||
max-width: #{$small - 1},
|
|
||||||
),
|
|
||||||
"medium": (
|
|
||||||
max-width: #{$medium - 1},
|
|
||||||
),
|
|
||||||
"large": (
|
|
||||||
max-width: #{$large - 1},
|
|
||||||
),
|
|
||||||
"small-up": (
|
|
||||||
min-width: #{$small},
|
|
||||||
),
|
|
||||||
"medium-up": (
|
|
||||||
min-width: #{$medium},
|
|
||||||
),
|
|
||||||
"large-up": (
|
|
||||||
min-width: #{$large},
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
// Source : https://www.sitepoint.com/managing-responsive-breakpoints-sass/
|
|
||||||
@mixin respond-to($name) {
|
|
||||||
// If the key exists in the map
|
|
||||||
@if map-has-key($bp-aliases, $name) {
|
|
||||||
// Prints a media query based on the value
|
|
||||||
@media #{inspect(map-get($bp-aliases, $name))} {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// If the key doesn't exist in the map
|
|
||||||
@else {
|
|
||||||
@warn "Unfortunately, no value could be retrieved from `#{$name}`. "
|
|
||||||
+"Please make sure it is defined in `$bp-aliases` map.";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,230 +0,0 @@
|
||||||
// ----------------
|
|
||||||
// Config Sass et variables
|
|
||||||
// ----------------
|
|
||||||
|
|
||||||
// ----------------
|
|
||||||
// Valeurs de Breakpoints
|
|
||||||
// ----------------
|
|
||||||
|
|
||||||
// Hypothèse : smartphone portrait/paysage < 576px < gros smartphone paysage + tablette portrait < 992px < tablette paysage < 1330px < laptop et plus
|
|
||||||
$breakpoints: (
|
|
||||||
sm: 576px,
|
|
||||||
md: 992px,
|
|
||||||
lg: 1400px,
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
$small: map-get($breakpoints, sm) !default;
|
|
||||||
$medium: map-get($breakpoints, md) !default;
|
|
||||||
$large: map-get($breakpoints, lg) !default;
|
|
||||||
|
|
||||||
// ----------------
|
|
||||||
// Spacers
|
|
||||||
// ----------------
|
|
||||||
|
|
||||||
$spacer: 1rem;
|
|
||||||
$spacers: (
|
|
||||||
"0": 0, // none
|
|
||||||
"1": 1px, // mono
|
|
||||||
"2": 0.125rem, // nano
|
|
||||||
"4": 0.25rem, // micro
|
|
||||||
"8": 0.5rem, // mini
|
|
||||||
"12": 0.75rem, // small
|
|
||||||
"16": 1rem, // medium
|
|
||||||
"20": 1.25rem, // large
|
|
||||||
"24": 1.5rem, // wide
|
|
||||||
"36": 2.25rem, // ultra
|
|
||||||
"auto": auto,
|
|
||||||
);
|
|
||||||
|
|
||||||
$spacer-none: map-get($spacers, "0");
|
|
||||||
$spacer-mono: map-get($spacers, "1");
|
|
||||||
$spacer-nano: map-get($spacers, "2");
|
|
||||||
$spacer-micro: map-get($spacers, "4");
|
|
||||||
$spacer-mini: map-get($spacers, "8");
|
|
||||||
$spacer-small: map-get($spacers, "12");
|
|
||||||
$spacer-medium: map-get($spacers, "16");
|
|
||||||
$spacer-large: map-get($spacers, "20");
|
|
||||||
$spacer-wide: map-get($spacers, "24");
|
|
||||||
$spacer-ultra: map-get($spacers, "36");
|
|
||||||
|
|
||||||
// ----------------
|
|
||||||
// Grid layout
|
|
||||||
// ----------------
|
|
||||||
|
|
||||||
$grid-columns: 6 !default;
|
|
||||||
|
|
||||||
$gaps: (
|
|
||||||
"0": 0,
|
|
||||||
"5": 0.313rem,
|
|
||||||
"10": 0.625rem,
|
|
||||||
"16": 1rem,
|
|
||||||
"20": 1.25rem,
|
|
||||||
"36": 2.25rem,
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
// ----------------
|
|
||||||
// Fonts
|
|
||||||
// ----------------
|
|
||||||
|
|
||||||
// Familles de fonts
|
|
||||||
$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
||||||
$font-family-headings: $font-family-base;
|
|
||||||
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
||||||
$line-height-base: 1.5;
|
|
||||||
|
|
||||||
// Font sizes
|
|
||||||
$font-size: (
|
|
||||||
"10": 0.625rem,
|
|
||||||
"11": 0.6875rem,
|
|
||||||
"12": 0.75rem,
|
|
||||||
"14": 0.875rem,
|
|
||||||
"16": 1rem,
|
|
||||||
"18": 1.125rem,
|
|
||||||
"20": 1.25rem,
|
|
||||||
"24": 1.5rem,
|
|
||||||
"30": 1.875rem,
|
|
||||||
"36": 2.25rem,
|
|
||||||
"base": 1rem,
|
|
||||||
"inherit": inherit,
|
|
||||||
);
|
|
||||||
|
|
||||||
$font-size-html: 100%;
|
|
||||||
$font-size-base: 1rem;
|
|
||||||
|
|
||||||
// Graisses des Fonts
|
|
||||||
$weight-light: 200;
|
|
||||||
$weight-book: 300;
|
|
||||||
$weight-regular: 400;
|
|
||||||
$weight-medium: 500;
|
|
||||||
$weight-bold: 700;
|
|
||||||
|
|
||||||
// ----------------
|
|
||||||
// Couleurs
|
|
||||||
// ----------------
|
|
||||||
|
|
||||||
// Variables niveaux de gris
|
|
||||||
|
|
||||||
$gray-100: #f8f9fa;
|
|
||||||
$gray-200: #e9ecef;
|
|
||||||
$gray-300: #dee2e6;
|
|
||||||
$gray-400: #ced4da;
|
|
||||||
$gray-500: #adb5bd;
|
|
||||||
$gray-600: #6c757d;
|
|
||||||
$gray-700: #495057;
|
|
||||||
$gray-800: #343a40;
|
|
||||||
$gray-900: #212529;
|
|
||||||
$white: #FFFFFF;
|
|
||||||
$black: #0F0F0F;
|
|
||||||
|
|
||||||
|
|
||||||
// Variables couleurs globales
|
|
||||||
|
|
||||||
$body-color: $gray-900;
|
|
||||||
$body-bg: $white;
|
|
||||||
|
|
||||||
$primary: #6fa939; // Couleur dominante. Elle peut s'appliquer à la fois à des surfaces ou à des contenus.
|
|
||||||
$primary-accent: #4e920f; // Modifieur de couleur dominante (survol, bordure)
|
|
||||||
$on-primary: $white; // Contenus (texte, lien, icône) affichés par-dessus une couche $primary
|
|
||||||
|
|
||||||
$secondary: #008cba; // Couleur d'accentuation. Elle s'applique généralement aux liens, mais peut s'appliquer à la fois à des surfaces ou à des contenus.
|
|
||||||
$secondary-accent: #027da7; // Modifieur de couleur d'accentuation (survol, bordure)
|
|
||||||
$on-secondary: $white; // Contenus affichés par-dessus une couche $secondary
|
|
||||||
|
|
||||||
// Variables couleurs statuts
|
|
||||||
|
|
||||||
$success-bg: #dff0d9;
|
|
||||||
$success-border: #d6e9c6;
|
|
||||||
$success: #3c763d;
|
|
||||||
$success-hover: #275c28;
|
|
||||||
|
|
||||||
$info-bg: #d9edf7;
|
|
||||||
$info-border: #bce8f1;
|
|
||||||
$info: #0d7192;
|
|
||||||
$info-hover: #005e7d;
|
|
||||||
|
|
||||||
$warning-bg: #fcf8e3;
|
|
||||||
$warning-border: #faebcc;
|
|
||||||
$warning: #8a6d3b;
|
|
||||||
$warning-hover: #654f29;
|
|
||||||
|
|
||||||
$error-bg: #fff2f2;
|
|
||||||
$error-border: #ebccd1;
|
|
||||||
$error: #e3224a;
|
|
||||||
$error-hover: #a00d10;
|
|
||||||
|
|
||||||
|
|
||||||
// Links
|
|
||||||
$link-decoration: underline;
|
|
||||||
$link-decoration-hover: underline;
|
|
||||||
|
|
||||||
// Border radius
|
|
||||||
$radius-none: 0;
|
|
||||||
$radius-small: 0.5rem;
|
|
||||||
$radius-medium: 1rem;
|
|
||||||
$radius-large: 20rem;
|
|
||||||
$radius-circle: 50%;
|
|
||||||
|
|
||||||
// ----------------
|
|
||||||
// Liste des propriétés utilitaires (note display: grid se trouve dans Grillade)
|
|
||||||
// ----------------
|
|
||||||
$utils: ((hidden, display, none),
|
|
||||||
(block, display, block),
|
|
||||||
(inline, display, inline),
|
|
||||||
(inline-block, display, inline-block),
|
|
||||||
(flex, display, flex),
|
|
||||||
(flex-row, flex-direction, row),
|
|
||||||
(flex-col, flex-direction, column),
|
|
||||||
(flex-wrap, flex-wrap, wrap),
|
|
||||||
(flex-no-wrap, flex-wrap, nowrap),
|
|
||||||
(flex-shrink, flex-shrink, 1),
|
|
||||||
(flex-no-shrink, flex-shrink, 0),
|
|
||||||
(flex-grow, flex-grow, 1),
|
|
||||||
(flex-no-grow, flex-grow, 0),
|
|
||||||
(float-left, float, left),
|
|
||||||
(float-right, float, right),
|
|
||||||
(float-none, float, none),
|
|
||||||
(text-bold, font-weight, bold),
|
|
||||||
(text-italic, font-style, italic),
|
|
||||||
(text-uppercase, text-transform, uppercase),
|
|
||||||
(text-lowercase, text-transform, lowercase),
|
|
||||||
(text-smaller, font-size, smaller),
|
|
||||||
(text-larger, font-size, larger),
|
|
||||||
(text-left, text-align, left),
|
|
||||||
(text-center, text-align, center),
|
|
||||||
(text-right, text-align, right),
|
|
||||||
(text-justify, text-align, justify),
|
|
||||||
(text-wrap, overflow-wrap, break-word),
|
|
||||||
(justify-start, justify-content, flex-start),
|
|
||||||
(justify-end, justify-content, flex-end),
|
|
||||||
(justify-center, justify-content, center),
|
|
||||||
(justify-between, justify-content, space-between),
|
|
||||||
(justify-around, justify-content, space-around),
|
|
||||||
(justify-evenly, justify-content, space-evenly),
|
|
||||||
(justify-items-start, justify-items, start),
|
|
||||||
(justify-items-end, justify-items, end),
|
|
||||||
(justify-items-center, justify-items, center),
|
|
||||||
(align-start, align-content, start),
|
|
||||||
(align-end, align-content, end),
|
|
||||||
(align-center, align-content, center),
|
|
||||||
(align-between, align-content, space-between),
|
|
||||||
(align-around, align-content, space-around),
|
|
||||||
(align-evenly, align-content, space-evenly),
|
|
||||||
(align-items-start, align-items, flex-start),
|
|
||||||
(align-items-end, align-items, flex-end),
|
|
||||||
(align-items-center, align-items, center),
|
|
||||||
(place-center, place-content, center),
|
|
||||||
(justify-self-auto, justify-self, auto),
|
|
||||||
(justify-self-start, justify-self, start),
|
|
||||||
(justify-self-end, justify-self, end),
|
|
||||||
(justify-self-center, justify-self, center),
|
|
||||||
(justify-self-stretch, justify-self, stretch),
|
|
||||||
(align-self-auto, align-self, auto),
|
|
||||||
(align-self-start, align-self, flex-start),
|
|
||||||
(align-self-end, align-self, flex-end),
|
|
||||||
(align-self-center, align-self, center),
|
|
||||||
(align-self-stretch, align-self, stretch),
|
|
||||||
(align-top, vertical-align, top),
|
|
||||||
(align-bottom, vertical-align, bottom),
|
|
||||||
(align-middle, vertical-align, middle),
|
|
||||||
(item-first, order, -100),
|
|
||||||
(item-last, order, 100)) !default;
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
/* ---------------------------- */
|
|
||||||
/* ==Layout classes */
|
|
||||||
/* ----------------------------- */
|
|
||||||
|
|
||||||
/* Global container */
|
|
||||||
.layout-maxed {
|
|
||||||
display: grid;
|
|
||||||
|
|
||||||
@each $key,
|
|
||||||
$value in $breakpoints {
|
|
||||||
@media (min-width: #{$value}) {
|
|
||||||
grid-template-columns:
|
|
||||||
minmax($spacer-small, 1fr)
|
|
||||||
minmax(auto, $value)
|
|
||||||
minmax($spacer-small, 1fr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Center all children */
|
|
||||||
.layout-maxed > * {
|
|
||||||
grid-column: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hero box */
|
|
||||||
.layout-hero {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-hero > * {
|
|
||||||
grid-column: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hero image */
|
|
||||||
.layout-hero-img {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
justify-self: center;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
@ -1,65 +0,0 @@
|
||||||
/*
|
|
||||||
* Hidden but not for an assistive technology like a screen reader, Yahoo! method
|
|
||||||
*/
|
|
||||||
|
|
||||||
.visually-hidden,
|
|
||||||
.sr-only {
|
|
||||||
position: absolute !important;
|
|
||||||
border: 0 !important;
|
|
||||||
height: 1px !important;
|
|
||||||
width: 1px !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
clip: rect(0, 0, 0, 0) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Disable animations styles when reduced motion is enabled
|
|
||||||
*/
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: reduce) {
|
|
||||||
* {
|
|
||||||
animation: none !important;
|
|
||||||
transition: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Change the cursor on busy elements in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[aria-busy="true"] {
|
|
||||||
cursor: progress;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Change the cursor on control elements in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[aria-controls] {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Change the cursor on disabled, not-editable, or otherwise
|
|
||||||
* inoperable elements in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[aria-disabled="true"],
|
|
||||||
[disabled] {
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Change the display on visually hidden accessible elements
|
|
||||||
* in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[aria-hidden="false"][hidden] {
|
|
||||||
display: initial;
|
|
||||||
}
|
|
||||||
|
|
||||||
[aria-hidden="false"][hidden]:not(:focus) {
|
|
||||||
clip: rect(0, 0, 0, 0);
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
@ -1,257 +0,0 @@
|
||||||
/* ----------------------------- */
|
|
||||||
/* ==Reset (base) */
|
|
||||||
/* ----------------------------- */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* 1. Switch to border-box model for all elements
|
|
||||||
* 2. Avoid min-width: auto on flex and grid items
|
|
||||||
*/
|
|
||||||
|
|
||||||
*,
|
|
||||||
*::before,
|
|
||||||
*::after {
|
|
||||||
box-sizing: border-box;
|
|
||||||
/* 1 */
|
|
||||||
min-width: 0;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* 1. Remove the grey highlight on links in iOS
|
|
||||||
* 2. Prevent orientation font changes in iOS
|
|
||||||
* 3. Breaks words to prevent overflow in all browsers
|
|
||||||
*/
|
|
||||||
|
|
||||||
html {
|
|
||||||
font-size: $font-size-html;
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
/* 1 */
|
|
||||||
-webkit-text-size-adjust: 100%;
|
|
||||||
/* 2 */
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
/* 3 */
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: $font-family-base;
|
|
||||||
font-size: $font-size-base;
|
|
||||||
line-height: $line-height-base;
|
|
||||||
background-color: $body-bg;
|
|
||||||
color: $body-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Headings
|
|
||||||
*/
|
|
||||||
|
|
||||||
h1,
|
|
||||||
.h1-like,
|
|
||||||
h2,
|
|
||||||
.h2-like,
|
|
||||||
h3,
|
|
||||||
.h3-like,
|
|
||||||
h4,
|
|
||||||
.h4-like,
|
|
||||||
h5,
|
|
||||||
.h5-like,
|
|
||||||
h6,
|
|
||||||
.h6-like {
|
|
||||||
color: $gray-900;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Links
|
|
||||||
*/
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $gray-600;
|
|
||||||
text-decoration: $link-decoration;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:focus,
|
|
||||||
a:hover,
|
|
||||||
a:active {
|
|
||||||
color: $gray-900;
|
|
||||||
text-decoration: $link-decoration-hover;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 1. Remove the bottom border in Chrome 57-
|
|
||||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
abbr[title] {
|
|
||||||
border-bottom: none;
|
|
||||||
/* 1 */
|
|
||||||
text-decoration: underline;
|
|
||||||
/* 2 */
|
|
||||||
text-decoration: underline dotted;
|
|
||||||
/* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Vertical rythm
|
|
||||||
*/
|
|
||||||
|
|
||||||
h1,
|
|
||||||
.h1-like,
|
|
||||||
h2,
|
|
||||||
.h2-like {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: $spacer-medium;
|
|
||||||
}
|
|
||||||
|
|
||||||
p,
|
|
||||||
address,
|
|
||||||
ol,
|
|
||||||
ul,
|
|
||||||
dl,
|
|
||||||
blockquote,
|
|
||||||
pre,
|
|
||||||
h3,
|
|
||||||
.h3-like,
|
|
||||||
h4,
|
|
||||||
.h4-like,
|
|
||||||
h5,
|
|
||||||
.h5-like,
|
|
||||||
h6,
|
|
||||||
.h6-like,
|
|
||||||
dt,
|
|
||||||
dd {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: $spacer-small;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Nested elements
|
|
||||||
*/
|
|
||||||
|
|
||||||
ol ol,
|
|
||||||
ol ul,
|
|
||||||
ul ol,
|
|
||||||
ul ul,
|
|
||||||
li ul,
|
|
||||||
li ol,
|
|
||||||
nav ul,
|
|
||||||
nav ol,
|
|
||||||
li p,
|
|
||||||
li .p-like {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Lists
|
|
||||||
*/
|
|
||||||
|
|
||||||
ul,
|
|
||||||
ol {
|
|
||||||
padding-left: $spacer-medium;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul,
|
|
||||||
nav ol {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Embed content
|
|
||||||
*/
|
|
||||||
|
|
||||||
audio,
|
|
||||||
canvas,
|
|
||||||
iframe,
|
|
||||||
img,
|
|
||||||
svg,
|
|
||||||
video {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
img,
|
|
||||||
table,
|
|
||||||
td,
|
|
||||||
blockquote,
|
|
||||||
pre,
|
|
||||||
code,
|
|
||||||
input,
|
|
||||||
textarea,
|
|
||||||
select,
|
|
||||||
video,
|
|
||||||
svg,
|
|
||||||
iframe {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
iframe,
|
|
||||||
img,
|
|
||||||
input,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
border-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Remove the border on iframes in all browsers
|
|
||||||
*/
|
|
||||||
|
|
||||||
iframe {
|
|
||||||
border-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Fill color matching to text color
|
|
||||||
*/
|
|
||||||
|
|
||||||
svg:not([fill]) {
|
|
||||||
fill: currentColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Hide the overflow in IE
|
|
||||||
*/
|
|
||||||
|
|
||||||
svg:not(:root) {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Tables
|
|
||||||
*/
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Rulers
|
|
||||||
*/
|
|
||||||
|
|
||||||
hr {
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 0;
|
|
||||||
overflow: visible;
|
|
||||||
border: 0;
|
|
||||||
border-top: 1px solid;
|
|
||||||
margin: $spacer-medium 0;
|
|
||||||
clear: both;
|
|
||||||
color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* table styles
|
|
||||||
*/
|
|
||||||
|
|
||||||
table {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
table-layout: fixed;
|
|
||||||
border-collapse: collapse;
|
|
||||||
vertical-align: top;
|
|
||||||
margin-bottom: $spacer-medium;
|
|
||||||
}
|
|
||||||
|
|
@ -1,224 +0,0 @@
|
||||||
/* ----------------------------- */
|
|
||||||
/* ==Reset (forms) */
|
|
||||||
/* ----------------------------- */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Remove the tapping delay on clickable elements in all browsers .
|
|
||||||
*/
|
|
||||||
|
|
||||||
a,
|
|
||||||
area,
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
label,
|
|
||||||
select,
|
|
||||||
summary,
|
|
||||||
textarea,
|
|
||||||
[tabindex] {
|
|
||||||
-ms-touch-action: manipulation;
|
|
||||||
touch-action: manipulation;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* 1. Change the inconsistent appearance in all browsers.
|
|
||||||
* 2. Add typography inheritance in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
margin: 0;
|
|
||||||
background-color: transparent; /* 1 */
|
|
||||||
color: inherit; /* 1 */
|
|
||||||
font-family: inherit; /* 2 */
|
|
||||||
font-size: inherit; /* 2 */
|
|
||||||
line-height: inherit; /* 2 */
|
|
||||||
letter-spacing: inherit; /* 2 */
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Basic User Interface reset
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
input:not([type="radio"]):not([type="checkbox"]),
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
|
||||||
* 2. Correct the odd `em` font sizing in all browsers.
|
|
||||||
*/
|
|
||||||
|
|
||||||
pre,
|
|
||||||
code,
|
|
||||||
kbd,
|
|
||||||
samp {
|
|
||||||
font-family: monospace, monospace; /* 1 */
|
|
||||||
font-size: 1em; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
tab-size: 2;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
line-height: normal;
|
|
||||||
overflow: auto;
|
|
||||||
-ms-overflow-style: scrollbar;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Show overflow in IE/Edge
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
input {
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Remove the inheritance of text transform in Firefox
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
select {
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Correct the inability to style clickable types in iOS and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
button,
|
|
||||||
[type="button"],
|
|
||||||
[type="reset"],
|
|
||||||
[type="submit"] {
|
|
||||||
-webkit-appearance: button;
|
|
||||||
}
|
|
||||||
|
|
||||||
form,
|
|
||||||
fieldset {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
margin: 0;
|
|
||||||
padding: $spacer-medium;
|
|
||||||
}
|
|
||||||
|
|
||||||
legend {
|
|
||||||
display: table;
|
|
||||||
max-width: 100%;
|
|
||||||
padding: 0 $spacer-micro;
|
|
||||||
border: 0;
|
|
||||||
color: inherit;
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
display: inline-block;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
overflow: auto;
|
|
||||||
vertical-align: top;
|
|
||||||
resize: vertical;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
progress {
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
output {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
summary {
|
|
||||||
display: list-item;
|
|
||||||
}
|
|
||||||
|
|
||||||
template {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ----------------------------- */
|
|
||||||
/* Form oddities */
|
|
||||||
/* ----------------------------- */
|
|
||||||
|
|
||||||
/*
|
|
||||||
* 1. Correct the odd appearance in Chrome, Edge, and Safari.
|
|
||||||
* 2. Correct the outline style in Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
[type="search"] {
|
|
||||||
-webkit-appearance: textfield; /* 1 */
|
|
||||||
outline-offset: -2px; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Correct the cursor style of increment and decrement buttons in Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
::-webkit-inner-spin-button,
|
|
||||||
::-webkit-outer-spin-button {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Correct the text style of placeholders in Chrome, Edge, and Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
::-webkit-input-placeholder {
|
|
||||||
color: inherit;
|
|
||||||
opacity: 0.54;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Remove the inner padding in Chrome, Edge, and Safari on macOS.
|
|
||||||
*/
|
|
||||||
|
|
||||||
::-webkit-search-decoration {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* 1. Correct the inability to style upload buttons in iOS and Safari.
|
|
||||||
* 2. Change font properties to `inherit` in Safari.
|
|
||||||
*/
|
|
||||||
|
|
||||||
::-webkit-file-upload-button {
|
|
||||||
-webkit-appearance: button; /* 1 */
|
|
||||||
font: inherit; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Remove the inner border and padding of focus outlines in Firefox.
|
|
||||||
*/
|
|
||||||
|
|
||||||
::-moz-focus-inner {
|
|
||||||
border-style: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Restore the focus outline styles unset by the previous rule in Firefox.
|
|
||||||
*/
|
|
||||||
|
|
||||||
:-moz-focusring {
|
|
||||||
outline: 1px dotted ButtonText;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Remove the additional :invalid styles in Firefox.
|
|
||||||
*/
|
|
||||||
|
|
||||||
:-moz-ui-invalid {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
@ -1,96 +0,0 @@
|
||||||
/* ----------------------------- */
|
|
||||||
/* ==Print (quick print reset) */
|
|
||||||
/* ----------------------------- */
|
|
||||||
|
|
||||||
@media print {
|
|
||||||
* {
|
|
||||||
background: transparent !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
text-shadow: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
width: auto;
|
|
||||||
margin: auto;
|
|
||||||
font-family: serif;
|
|
||||||
font-size: 12pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
p,
|
|
||||||
.p-like,
|
|
||||||
h1,
|
|
||||||
.h1-like,
|
|
||||||
h2,
|
|
||||||
.h2-like,
|
|
||||||
h3,
|
|
||||||
.h3-like,
|
|
||||||
h4,
|
|
||||||
.h4-like,
|
|
||||||
h5,
|
|
||||||
.h5-like,
|
|
||||||
h6,
|
|
||||||
.h6-like,
|
|
||||||
blockquote,
|
|
||||||
label,
|
|
||||||
ul,
|
|
||||||
ol {
|
|
||||||
color: #000;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.print {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-print {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* no orphans, no widows */
|
|
||||||
p,
|
|
||||||
.p-like,
|
|
||||||
blockquote {
|
|
||||||
orphans: 3;
|
|
||||||
widows: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* no breaks inside these elements */
|
|
||||||
blockquote,
|
|
||||||
ul,
|
|
||||||
ol {
|
|
||||||
page-break-inside: avoid;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* page break before main headers
|
|
||||||
h1,
|
|
||||||
.h1-like {
|
|
||||||
page-break-before: always;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* no breaks after these elements */
|
|
||||||
h1,
|
|
||||||
.h1-like,
|
|
||||||
h2,
|
|
||||||
.h2-like,
|
|
||||||
h3,
|
|
||||||
.h3-like,
|
|
||||||
caption {
|
|
||||||
page-break-after: avoid;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* displaying URLs
|
|
||||||
a[href]::after {
|
|
||||||
content: " (" attr(href) ")";
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
a[href^="javascript:"]::after,
|
|
||||||
a[href^="#"]::after {
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,85 +0,0 @@
|
||||||
/*
|
|
||||||
* component nav "burger" button
|
|
||||||
*/
|
|
||||||
/*
|
|
||||||
* HTML template example:
|
|
||||||
* <button class="burger-button" type="button" role="button" aria-label="open/close navigation"><i></i></button>
|
|
||||||
* activate it with a JS toggle-class to .is-active
|
|
||||||
* see doc : https: //www.knacss.com/doc.html#buttons
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
* burger variables (you can change them)
|
|
||||||
*/
|
|
||||||
|
|
||||||
$burger-color : #333;
|
|
||||||
$burger-background : transparent;
|
|
||||||
$burger-hover-background : transparent;
|
|
||||||
$burger-size : 2.6rem;
|
|
||||||
$burger-weight : 5px; // size of stripes
|
|
||||||
$burger-padding : 0;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* burger button styles
|
|
||||||
*/
|
|
||||||
|
|
||||||
.burger-button {
|
|
||||||
padding: 0;
|
|
||||||
background-color: transparent;
|
|
||||||
box-shadow: none;
|
|
||||||
outline: 0;
|
|
||||||
border: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.burger-button > * {
|
|
||||||
display: inline-flex;
|
|
||||||
vertical-align: top;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: stretch;
|
|
||||||
height: $burger-size;
|
|
||||||
width: $burger-size;
|
|
||||||
padding: $burger-padding;
|
|
||||||
background-color: $burger-background;
|
|
||||||
background-image: linear-gradient($burger-color, $burger-color);
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-origin: content-box;
|
|
||||||
background-size: 100% $burger-weight;
|
|
||||||
transition: .25s;
|
|
||||||
transition-property: transform, background;
|
|
||||||
will-change: transform, background;
|
|
||||||
}
|
|
||||||
|
|
||||||
.burger-button > *::before,
|
|
||||||
.burger-button > *::after {
|
|
||||||
content: "";
|
|
||||||
height: $burger-weight;
|
|
||||||
background: $burger-color;
|
|
||||||
transition: .25s;
|
|
||||||
transition-property: transform, top;
|
|
||||||
will-change: transform, top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.burger-button:hover > * {
|
|
||||||
background-color: $burger-hover-background;
|
|
||||||
}
|
|
||||||
|
|
||||||
.burger-button:focus {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.burger-button.is-active > * {
|
|
||||||
background-image: none;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.burger-button.is-active>*::before {
|
|
||||||
transform: translateY(50%) rotate3d(0, 0, 1, 45deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.burger-button.is-active>*::after {
|
|
||||||
transform: translateY(-50%) rotate3d(0, 0, 1, -45deg);
|
|
||||||
}
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
/*
|
|
||||||
* basic button component
|
|
||||||
*/
|
|
||||||
/*
|
|
||||||
* HTML template example:
|
|
||||||
* preferably use <button> for buttons !
|
|
||||||
* use .button or .btn (for structure) and .btn-- (for variants) (see appearance mixin)
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
* button reset
|
|
||||||
*/
|
|
||||||
|
|
||||||
%btn {
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: $spacer-small $spacer-medium;
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
transition: 0.25s;
|
|
||||||
transition-property: box-shadow, background-color, color, border;
|
|
||||||
text-decoration: none;
|
|
||||||
border: none;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn,
|
|
||||||
.button {
|
|
||||||
@extend %btn;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// button state variants
|
|
||||||
.btn,
|
|
||||||
.button {
|
|
||||||
&--small {
|
|
||||||
padding: $spacer-micro-plus $spacer-small;
|
|
||||||
font-size: .8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--big {
|
|
||||||
padding: $spacer-medium $spacer-medium;
|
|
||||||
font-size: 1.4em;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--block {
|
|
||||||
width: 100% !important;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--unstyled {
|
|
||||||
padding: 0;
|
|
||||||
border: none;
|
|
||||||
text-align: left;
|
|
||||||
background: none;
|
|
||||||
border-radius: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
box-shadow: none;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
/*
|
|
||||||
* component checkbox
|
|
||||||
*/
|
|
||||||
/*
|
|
||||||
* HTML template example:
|
|
||||||
* <input type="checkbox" class="checkbox" id="c1">
|
|
||||||
* <label for="c1">click here</label>
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
* checkbox variables (you can change them)
|
|
||||||
*/
|
|
||||||
|
|
||||||
$checkbox-color: $white;
|
|
||||||
$checkbox-background: $primary;
|
|
||||||
$checkbox-size: 2rem;
|
|
||||||
$checkbox-border-radius: 4px;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* checkbox styles
|
|
||||||
*/
|
|
||||||
|
|
||||||
.checkbox {
|
|
||||||
border-radius: $checkbox-border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
width: $checkbox-size;
|
|
||||||
height: $checkbox-size;
|
|
||||||
vertical-align: text-bottom;
|
|
||||||
box-shadow: inset 0 0 0 1px $primary;
|
|
||||||
background-color: $checkbox-color;
|
|
||||||
transition: background-color 0.15s;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox + label {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox:disabled {
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox:disabled + label {
|
|
||||||
opacity: 0.6;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox:checked {
|
|
||||||
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=");
|
|
||||||
background-size: 60% 60%;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-color: $checkbox-background;
|
|
||||||
}
|
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
/*
|
|
||||||
* component quote
|
|
||||||
*/
|
|
||||||
/*
|
|
||||||
* HTML template example:
|
|
||||||
* <blockquote>
|
|
||||||
* <p>Lorem Elsass Ipsum mitt picon bière</p>
|
|
||||||
* </blockquote>
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
* quotes variables (you can change them)
|
|
||||||
*/
|
|
||||||
|
|
||||||
$blockquote-color: #454d5d;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* quotes styles
|
|
||||||
*/
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
position: relative;
|
|
||||||
padding-left: 3em;
|
|
||||||
min-height: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote::before {
|
|
||||||
content: "\201C";
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
font-family: georgia, serif;
|
|
||||||
font-size: 5em;
|
|
||||||
height: .4em;
|
|
||||||
line-height: .9;
|
|
||||||
color: $blockquote-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote > footer {
|
|
||||||
margin-top: .75em;
|
|
||||||
font-size: 0.9em;
|
|
||||||
color: rgba(0, 0, 0, .7);
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
content: "\2014 \0020";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
q {
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
q,
|
|
||||||
.q {
|
|
||||||
quotes: "“" "”" "‘" "’";
|
|
||||||
|
|
||||||
&:lang(fr) {
|
|
||||||
quotes: "«\00a0" "\00a0»" "“" "”";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
/*
|
|
||||||
* component radio
|
|
||||||
*/
|
|
||||||
/*
|
|
||||||
* HTML template example:
|
|
||||||
* <input type="radio" class="radio" name="radio" id="r1">
|
|
||||||
* <label for="r1">Click here</label>
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
* radio variables (you can change them)
|
|
||||||
*/
|
|
||||||
|
|
||||||
$radio-color: $primary;
|
|
||||||
$radio-background: $white;
|
|
||||||
$radio-size: 2rem;
|
|
||||||
$radio-border-radius: 50%;
|
|
||||||
|
|
||||||
/*
|
|
||||||
* radio styles
|
|
||||||
*/
|
|
||||||
|
|
||||||
.radio {
|
|
||||||
border-radius: $radio-border-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radio {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
width: $radio-size;
|
|
||||||
height: $radio-size;
|
|
||||||
vertical-align: text-bottom;
|
|
||||||
box-shadow: inset 0 0 0 1px $primary;
|
|
||||||
background-color: $radio-background;
|
|
||||||
transition: background-size 0.15s;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radio + label {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radio:disabled {
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radio:disabled + label {
|
|
||||||
opacity: 0.6;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.radio:checked {
|
|
||||||
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%2240%22%20height%3D%2240%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%23ffffff%22/%3E%3C/svg%3E");
|
|
||||||
background-size: 70% 70%;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-color: $primary;
|
|
||||||
}
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
/*
|
|
||||||
* basic select component
|
|
||||||
*/
|
|
||||||
/*
|
|
||||||
HTML template example:
|
|
||||||
<select>
|
|
||||||
<option value="salade">salade</option>
|
|
||||||
<option value="tomate">tomate</option>
|
|
||||||
<option value="oignons">oignons</option>
|
|
||||||
</select>
|
|
||||||
*/
|
|
||||||
|
|
||||||
select {
|
|
||||||
appearance: none;
|
|
||||||
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
|
|
||||||
background-position: right 0.8rem center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
@ -1,32 +0,0 @@
|
||||||
/*!
|
|
||||||
* KNACSS Reborn: Just keep it simple!
|
|
||||||
* @author: Alsacreations
|
|
||||||
* v8.2 2022/01
|
|
||||||
* Licence WTFPL http://www.wtfpl.net/
|
|
||||||
*/
|
|
||||||
|
|
||||||
// IMPORTANT : Seuls les fichiers "Noyau" et "Utilitaires" sont importés par défaut. Ajoutez les fichiers de composants si nécessaires dans votre projet.
|
|
||||||
|
|
||||||
// NOYAU
|
|
||||||
@import "abstracts/variables-sass";
|
|
||||||
@import "abstracts/mixins-sass";
|
|
||||||
|
|
||||||
@import "base/reset-base";
|
|
||||||
@import "base/reset-accessibility";
|
|
||||||
@import "base/reset-forms";
|
|
||||||
@import "base/reset-print";
|
|
||||||
@import "base/layout";
|
|
||||||
|
|
||||||
// UTILITAIRES
|
|
||||||
@import "utils/utils-global";
|
|
||||||
@import "utils/utils-font-sizes";
|
|
||||||
@import "utils/utils-spacers";
|
|
||||||
@import "utils/grillade";
|
|
||||||
|
|
||||||
// COMPOSANTS (à ajouter au besoin)
|
|
||||||
// @import "components/button";
|
|
||||||
// @import "components/burger";
|
|
||||||
// @import "components/checkbox";
|
|
||||||
// @import "components/radio";
|
|
||||||
// @import "components/select";
|
|
||||||
// @import "components/quote";
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
/* Font sizes utility classes */
|
|
||||||
|
|
||||||
// loop for each font-size
|
|
||||||
@each $key, $value in $font-size {
|
|
||||||
.text-#{$key} {
|
|
||||||
font-size: $value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// loop for each breakpoint
|
|
||||||
@each $key, $value in $font-size {
|
|
||||||
@each $bp, $bpv in $breakpoints {
|
|
||||||
@media (min-width: #{$bpv}) {
|
|
||||||
.#{$bp}\:text-#{$key} {
|
|
||||||
font-size: $value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,66 +0,0 @@
|
||||||
/*
|
|
||||||
* Global utility classes
|
|
||||||
*/
|
|
||||||
|
|
||||||
@each $class, $prop, $value in $utils {
|
|
||||||
.#{$class} {
|
|
||||||
#{$prop}: #{$value};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// loop for each breakpoint
|
|
||||||
@each $class, $prop, $value in $utils {
|
|
||||||
@each $bp, $bpv in $breakpoints {
|
|
||||||
@media (min-width: #{$bpv}) {
|
|
||||||
.#{$bp}\:#{$class} {
|
|
||||||
#{$prop}: #{$value};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// multi-properties utils
|
|
||||||
.is-unstyled {
|
|
||||||
list-style: none;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
.is-disabled,
|
|
||||||
[disabled] {
|
|
||||||
opacity: 0.6;
|
|
||||||
cursor: not-allowed !important;
|
|
||||||
filter: grayscale(1);
|
|
||||||
}
|
|
||||||
.text-normal {
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// loop for each breakpoint
|
|
||||||
@each $bp, $bpv in $breakpoints {
|
|
||||||
@media (min-width: #{$bpv}) {
|
|
||||||
.#{$bp}\:visually-hidden {
|
|
||||||
position: absolute !important;
|
|
||||||
border: 0 !important;
|
|
||||||
height: 1px !important;
|
|
||||||
width: 1px !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
overflow: hidden !important;
|
|
||||||
clip: rect(0, 0, 0, 0) !important;
|
|
||||||
}
|
|
||||||
.#{$bp}\:is-unstyled {
|
|
||||||
list-style: none;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
.#{$bp}\:is-disabled {
|
|
||||||
opacity: 0.6;
|
|
||||||
cursor: not-allowed !important;
|
|
||||||
filter: grayscale(1);
|
|
||||||
}
|
|
||||||
.#{$bp}\:text-normal {
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,134 +0,0 @@
|
||||||
/* Spacers utility classes */
|
|
||||||
|
|
||||||
// loop for each spacer
|
|
||||||
@each $key,
|
|
||||||
$value in $spacers {
|
|
||||||
|
|
||||||
.p-#{$key} {
|
|
||||||
padding: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pt-#{$key} {
|
|
||||||
padding-top: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pr-#{$key} {
|
|
||||||
padding-right: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pb-#{$key} {
|
|
||||||
padding-bottom: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pl-#{$key} {
|
|
||||||
padding-left: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.px-#{$key} {
|
|
||||||
padding-left: $value;
|
|
||||||
padding-right: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.py-#{$key} {
|
|
||||||
padding-top: $value;
|
|
||||||
padding-bottom: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-#{$key} {
|
|
||||||
margin: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mt-#{$key} {
|
|
||||||
margin-top: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mr-#{$key} {
|
|
||||||
margin-right: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mb-#{$key} {
|
|
||||||
margin-bottom: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ml-#{$key} {
|
|
||||||
margin-left: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx-#{$key} {
|
|
||||||
margin-left: $value;
|
|
||||||
margin-right: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.my-#{$key} {
|
|
||||||
margin-top: $value;
|
|
||||||
margin-bottom: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
// loop for each breakpoint
|
|
||||||
@each $bp,
|
|
||||||
$bpv in $breakpoints {
|
|
||||||
|
|
||||||
@media (min-width: #{$bpv}) {
|
|
||||||
.#{$bp}\:p-#{$key} {
|
|
||||||
padding: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$bp}\:pt-#{$key} {
|
|
||||||
padding-top: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$bp}\:pr-#{$key} {
|
|
||||||
padding-right: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$bp}\:pb-#{$key} {
|
|
||||||
padding-bottom: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$bp}\:pl-#{$key} {
|
|
||||||
padding-left: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$bp}\:px-#{$key} {
|
|
||||||
padding-left: $value;
|
|
||||||
padding-right: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$bp}\:py-#{$key} {
|
|
||||||
padding-top: $value;
|
|
||||||
padding-bottom: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$bp}\:m-#{$key} {
|
|
||||||
margin: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$bp}\:mt-#{$key} {
|
|
||||||
margin-top: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$bp}\:mr-#{$key} {
|
|
||||||
margin-right: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$bp}\:mb-#{$key} {
|
|
||||||
margin-bottom: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$bp}\:ml-#{$key} {
|
|
||||||
margin-left: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$bp}\:mx-#{$key} {
|
|
||||||
margin-left: $value;
|
|
||||||
margin-right: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$bp}\:my-#{$key} {
|
|
||||||
margin-top: $value;
|
|
||||||
margin-bottom: $value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,152 +0,0 @@
|
||||||
/* -------------------------------------------------- */
|
|
||||||
/* ==Grillade : système de micro-grille de KNACSS */
|
|
||||||
/* ------------------------------------------------ */
|
|
||||||
// Grillade est directement inspiré tailwindcss.com et de ses classes utilitaires
|
|
||||||
|
|
||||||
// Les variables ci-dessous ne sont appliquées que si elles n'ont pas été renseignées
|
|
||||||
// dans le fichiers de variables de KNACSS.
|
|
||||||
|
|
||||||
@if variable_exists(grid-columns) {
|
|
||||||
$grid-columns: $grid-columns !global;
|
|
||||||
} @else {
|
|
||||||
$grid-columns: 6 !global;
|
|
||||||
}
|
|
||||||
|
|
||||||
@if variable_exists(gaps) {
|
|
||||||
$gaps: $gaps !global;
|
|
||||||
} @else {
|
|
||||||
$gaps: (
|
|
||||||
"0": 0,
|
|
||||||
"5": 0.313rem,
|
|
||||||
"10": 0.625rem,
|
|
||||||
"16": 1rem,
|
|
||||||
"20": 1.25rem,
|
|
||||||
"36": 2.25rem,
|
|
||||||
) !global;
|
|
||||||
}
|
|
||||||
|
|
||||||
@if variable_exists(breakpoints) {
|
|
||||||
$breakpoints: $breakpoints !global;
|
|
||||||
} @else {
|
|
||||||
$breakpoints: (
|
|
||||||
sm: 576px,
|
|
||||||
md: 992px,
|
|
||||||
lg: 1330px,
|
|
||||||
) !global;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid {
|
|
||||||
display: grid;
|
|
||||||
}
|
|
||||||
// grid class for each breakpoint
|
|
||||||
@each $bp, $bpv in $breakpoints {
|
|
||||||
@media (min-width: #{$bpv}) {
|
|
||||||
.#{$bp}\:grid {
|
|
||||||
display: grid;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* grid-template-columns initialisation */
|
|
||||||
@for $i from 1 through $grid-columns {
|
|
||||||
.grid-cols-#{$i} {
|
|
||||||
grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* grid-template-columns au sein des breakpoints */
|
|
||||||
@each $bp, $bpv in $breakpoints {
|
|
||||||
@media (min-width: #{$bpv}) {
|
|
||||||
@for $i from 1 through $grid-columns {
|
|
||||||
.#{$bp}\:grid-cols-#{$i} {
|
|
||||||
grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* gap initialisation */
|
|
||||||
@each $key, $value in $gaps {
|
|
||||||
.gap-#{$key} {
|
|
||||||
gap: $value;
|
|
||||||
}
|
|
||||||
.gap-x-#{$key} {
|
|
||||||
column-gap: $value;
|
|
||||||
}
|
|
||||||
.gap-y-#{$key} {
|
|
||||||
row-gap: $value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* gap au sein des breakpoints */
|
|
||||||
@each $bp, $bpv in $breakpoints {
|
|
||||||
@media (min-width: #{$bpv}) {
|
|
||||||
@each $key, $value in $gaps {
|
|
||||||
.#{$bp}\:gap-#{$key} {
|
|
||||||
gap: $value;
|
|
||||||
}
|
|
||||||
.#{$bp}\:gap-x-#{$key} {
|
|
||||||
column-gap: $value;
|
|
||||||
}
|
|
||||||
.#{$bp}\:gap-y-#{$key} {
|
|
||||||
row-gap: $value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* grid-items initialisation */
|
|
||||||
@for $i from 1 through $grid-columns {
|
|
||||||
.col-start-#{$i} {
|
|
||||||
grid-column-start: #{$i};
|
|
||||||
}
|
|
||||||
.col-end-#{$i} {
|
|
||||||
grid-column-end: #{$i};
|
|
||||||
}
|
|
||||||
.col-span-#{$i} {
|
|
||||||
grid-column: span #{$i} / span #{$i};
|
|
||||||
}
|
|
||||||
.col-span-full {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
}
|
|
||||||
.row-start-#{$i} {
|
|
||||||
grid-row-start: #{$i};
|
|
||||||
}
|
|
||||||
.row-end-#{$i} {
|
|
||||||
grid-row-end: #{$i};
|
|
||||||
}
|
|
||||||
.row-span-#{$i} {
|
|
||||||
grid-row: span #{$i} / span #{$i};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* grid-items au sein des breakpoints */
|
|
||||||
@each $bp, $bpv in $breakpoints {
|
|
||||||
@media (min-width: #{$bpv}) {
|
|
||||||
@for $i from 1 through $grid-columns {
|
|
||||||
// loop for each breakpoint
|
|
||||||
|
|
||||||
.#{$bp}\:col-start-#{$i} {
|
|
||||||
grid-column-start: #{$i};
|
|
||||||
}
|
|
||||||
.#{$bp}\:col-end-#{$i} {
|
|
||||||
grid-column-end: #{$i};
|
|
||||||
}
|
|
||||||
.#{$bp}\:col-span-#{$i} {
|
|
||||||
grid-column: span #{$i} / span #{$i};
|
|
||||||
}
|
|
||||||
.#{$bp}\:col-span-full {
|
|
||||||
grid-column: 1 / -1;
|
|
||||||
}
|
|
||||||
.#{$bp}\:row-start-#{$i} {
|
|
||||||
grid-row-start: #{$i};
|
|
||||||
}
|
|
||||||
.#{$bp}\:row-end-#{$i} {
|
|
||||||
grid-row-end: #{$i};
|
|
||||||
}
|
|
||||||
.#{$bp}\:row-span-#{$i} {
|
|
||||||
grid-row: span #{$i} / span #{$i};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Add table
Reference in a new issue