Compare commits
No commits in common. "master" and "2.9.2" have entirely different histories.
50 changed files with 2529 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
|
||||
*.tli
|
||||
*.tlh
|
||||
*.tmp
|
||||
*.vspscc
|
||||
.builds
|
||||
*.dotCover
|
||||
|
|
@ -93,7 +94,6 @@ DocProject/Help/*.hhp
|
|||
DocProject/Help/Html2
|
||||
DocProject/Help/html
|
||||
|
||||
|
||||
# Click-Once directory
|
||||
publish
|
||||
|
||||
|
|
@ -162,17 +162,3 @@ pip-log.txt
|
|||
|
||||
# Mac crap
|
||||
.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/>
|
||||
- [**Documentation KNACSS Reborn**](https://www.knacss.com/doc.html)
|
||||
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 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)
|
||||
- [**Pense-bête PDF KNACSS v7**](https://www.knacss.com/assets/pdf/knacss7-cheatsheet.pdf)
|
||||
<link rel="stylesheet" href="knacss.css" media="all">
|
||||
|
||||
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.2",
|
||||
"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/)
|
||||
65
css/flexbox.css
Normal file
65
css/flexbox.css
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==flexbox classes */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* flexbox layout context on container */
|
||||
.flex {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
/* horizontal alignment */
|
||||
.flex-h {
|
||||
-webkit-box-orient: horizontal;
|
||||
-moz-box-orient: horizontal;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
/* vertical alignment */
|
||||
.flex-v {
|
||||
-webkit-box-orient: vertical;
|
||||
-moz-box-orient: vertical;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
/* for fluid items */
|
||||
.flex-fluid {
|
||||
-moz-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-moz-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
/* for items that must appear first */
|
||||
.flex-start {
|
||||
-webkit-box-ordinal-group: -1;
|
||||
-moz-box-ordinal-group: 0;
|
||||
-ms-flex-order: -1;
|
||||
-webkit-order: -1;
|
||||
-moz-order: -1;
|
||||
order: -1;
|
||||
}
|
||||
/* for items that must appear middle */
|
||||
.flex-mid {
|
||||
-webkit-box-ordinal-group: 1;
|
||||
-moz-box-ordinal-group: 1;
|
||||
-ms-flex-order: 1;
|
||||
-webkit-order: 1;
|
||||
-moz-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
/* for items that must appear at the end */
|
||||
.flex-end {
|
||||
-webkit-box-ordinal-group: 42;
|
||||
-moz-box-ordinal-group: 42;
|
||||
-ms-flex-order: 42;
|
||||
-webkit-order: 42;
|
||||
-moz-order: 42;
|
||||
order: 42;
|
||||
}
|
||||
88
css/forms.css
Normal file
88
css/forms.css
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
|
||||
/* ----------------------------- */
|
||||
/* ==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;
|
||||
}
|
||||
77
css/grids.css
Normal file
77
css/grids.css
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
|
||||
/* ----------------------------- */
|
||||
/* ==grids */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* 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;
|
||||
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;
|
||||
*display: inline; *zoom: 1; /* IE67 hack */
|
||||
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: 1024px) {
|
||||
.grid5 > *,
|
||||
.grid6 > *,
|
||||
.grid8 > *,
|
||||
.grid10 > *,
|
||||
.grid12 > * {width: 33.333%}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.grid3 > *,
|
||||
.grid4 > *,
|
||||
.grid5 > *,
|
||||
.grid6 > *,
|
||||
.grid8 > *,
|
||||
.grid10 > *,
|
||||
.grid12 > * {width: 50%}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.grid > * > * {width: 100% !important}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
139
css/icons.css
Normal file
139
css/icons.css
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
|
||||
/* ----------------------------- */
|
||||
/* ==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: 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: -.05em;
|
||||
}
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
489
css/knacss.css
Normal file
489
css/knacss.css
Normal file
|
|
@ -0,0 +1,489 @@
|
|||
/*!
|
||||
* www.KNACSS.com V2.9.2 (2014-01) @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: #fff;
|
||||
color: #000;
|
||||
font-family: helvetica, arial, sans-serif;
|
||||
font-size: 1.4em; /* equiv 14px */
|
||||
line-height: 1.5; /* adapt to your design */
|
||||
}
|
||||
|
||||
/* font-sizing for content */
|
||||
/* preserves vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
blockquote,
|
||||
pre,
|
||||
td,
|
||||
th,
|
||||
label,
|
||||
textarea,
|
||||
caption,
|
||||
details,
|
||||
figure {
|
||||
margin: .75em 0 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
h1, .h1-like {
|
||||
margin: 0.6563em 0 0 0;
|
||||
font-size: 2.2857em; /* equiv 32px */
|
||||
line-height: 1.3126;
|
||||
}
|
||||
h2, .h2-like {
|
||||
margin: 0.75em 0 0 0;
|
||||
font-size: 2em; /* equiv 28px */
|
||||
line-height: 1.5;
|
||||
}
|
||||
h3, .h3-like {
|
||||
margin: 0.875em 0 0 0;
|
||||
font-size: 1.7143em; /* equiv 24px */
|
||||
line-height: 1.75;
|
||||
}
|
||||
h4, .h4-like {
|
||||
margin: 1.05em 0 0 0;
|
||||
font-size: 1.4286em; /* equiv 20px */
|
||||
line-height: 1.05;
|
||||
}
|
||||
h5, .h5-like {
|
||||
margin: 1.1667em 0 0 0;
|
||||
font-size: 1.2857em; /* equiv 18px */
|
||||
line-height: 1.1667;
|
||||
}
|
||||
h6, .h6-like {
|
||||
margin: 1.3125em 0 0 0;
|
||||
font-size: 1.1429em; /* equiv 16px */
|
||||
line-height: 1.3125;
|
||||
}
|
||||
|
||||
/* alternate font-sizing */
|
||||
.smaller {
|
||||
font-size: .7143em; /* equiv 10px */
|
||||
}
|
||||
.small {
|
||||
font-size: .8571em; /* equiv 12px */
|
||||
}
|
||||
.big {
|
||||
font-size: 1.1429em; /* equiv 16px */
|
||||
}
|
||||
.bigger {
|
||||
font-size: 1.2857em; /* equiv 18px */
|
||||
}
|
||||
.biggest {
|
||||
font-size: 1.4286em; /* equiv 20px */
|
||||
}
|
||||
|
||||
code,
|
||||
pre,
|
||||
samp,
|
||||
kbd {
|
||||
white-space: pre-line; /* IE fix */
|
||||
white-space: pre-wrap;
|
||||
font-family: consolas, 'DejaVu Sans Mono', courier, monospace;
|
||||
line-height: 1em;
|
||||
}
|
||||
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;
|
||||
}
|
||||
.skip-links a {
|
||||
position: absolute;
|
||||
left: -7000px;
|
||||
padding: 0.5em;
|
||||
background: #000;
|
||||
color:#fff;
|
||||
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 (percentages 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; }
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
/* == 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,0 = small(10px),medium(20px),large(30px), zero or 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 */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* 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 a 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;
|
||||
}
|
||||
69
css/print.css
Normal file
69
css/print.css
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
/* 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: "";
|
||||
}
|
||||
}
|
||||
214
css/rwd.css
Normal file
214
css/rwd.css
Normal file
|
|
@ -0,0 +1,214 @@
|
|||
|
||||
/* ----------------------------- */
|
||||
/* ==viewport fixing for RWD */
|
||||
/* ----------------------------- */
|
||||
@-webkit-viewport {
|
||||
width: device-width;
|
||||
zoom: 1.0;
|
||||
}
|
||||
@-moz-viewport {
|
||||
width: device-width;
|
||||
zoom: 1.0;
|
||||
}
|
||||
@-ms-viewport {
|
||||
width: device-width;
|
||||
zoom: 1.0;
|
||||
}
|
||||
@-o-viewport {
|
||||
width: device-width;
|
||||
zoom: 1.0;
|
||||
}
|
||||
@viewport {
|
||||
width: device-width;
|
||||
zoom: 1.0;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==desktop and retina medias */
|
||||
/* ----------------------------- */
|
||||
|
||||
@media (min-width: 641px) {
|
||||
/* 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 / small / tiny */
|
||||
/* ---------------------------------- */
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
|
||||
/* layouts for large (l) screens */
|
||||
.large-hidden,
|
||||
.tablet-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 (l) 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 {
|
||||
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 (l) screens */
|
||||
.large-ma0 { margin: 0 !important; }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
/* quick tablet reset */
|
||||
.w600p,
|
||||
.w700p,
|
||||
.w800p,
|
||||
.w960p,
|
||||
.mw960p,
|
||||
.small-wauto {
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
-o-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
/* layouts for small (s) screens */
|
||||
.small-hidden,
|
||||
.tablet-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;
|
||||
}
|
||||
|
||||
/* widths for small (s) 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 {
|
||||
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 (s) screens */
|
||||
.small-ma0 { margin: 0 !important; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
|
||||
/* quick smartphone 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 (t) screens */
|
||||
.tiny-hidden,
|
||||
.phone-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 (t) 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 {
|
||||
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 (t) screens */
|
||||
.tiny-ma0 { margin: 0 !important; }
|
||||
}
|
||||
78
css/tables.css
Normal file
78
css/tables.css
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
|
||||
/* ----------------------------- */
|
||||
/* ==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);
|
||||
}
|
||||
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 @@
|
|||
|
||||
/* ----------------------------- */
|
||||
/* == 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: @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; }
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
/* == 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;
|
||||
}
|
||||
73
less/_02-grids.less
Normal file
73
less/_02-grids.less
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
|
||||
/* 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;
|
||||
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;
|
||||
*display: inline; *zoom: 1; /* IE67 hack */
|
||||
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}
|
||||
}
|
||||
78
less/_03-tables.less
Normal file
78
less/_03-tables.less
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
|
||||
/* ----------------------------- */
|
||||
/* ==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 @@
|
|||
|
||||
/* ----------------------------- */
|
||||
/* ==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 @@
|
|||
|
||||
/* ----------------------------- */
|
||||
/* ==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;
|
||||
}
|
||||
190
less/_06-rwd.less
Normal file
190
less/_06-rwd.less
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
|
||||
/* ----------------------------- */
|
||||
/* ==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 (l) screens */
|
||||
.large-hidden,
|
||||
.tablet-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 (l) 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 {
|
||||
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 (l) screens */
|
||||
.large-ma0 { margin: 0 !important; }
|
||||
}
|
||||
|
||||
@media (max-width: @smallscreen) {
|
||||
|
||||
/* quick tablet reset */
|
||||
.w600p,
|
||||
.w700p,
|
||||
.w800p,
|
||||
.w960p,
|
||||
.mw960p,
|
||||
.small-wauto {
|
||||
width: auto;
|
||||
float: none;
|
||||
}
|
||||
|
||||
/* layouts for medium (m) screens */
|
||||
.small-hidden,
|
||||
.tablet-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;
|
||||
-o-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
/* widths for small (s) 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 {
|
||||
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 (s) screens */
|
||||
.small-ma0 { margin: 0 !important; }
|
||||
}
|
||||
|
||||
@media (max-width: @tinyscreen) {
|
||||
|
||||
/* quick smartphone 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 (t) screens */
|
||||
.tiny-hidden,
|
||||
.phone-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 (t) 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 {
|
||||
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 (t) screens */
|
||||
.tiny-ma0 { margin: 0 !important; }
|
||||
}
|
||||
54
less/_07-flexbox.less
Normal file
54
less/_07-flexbox.less
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
|
||||
/* flexbox layout */
|
||||
.flex {
|
||||
display : -webkit-box;
|
||||
display : -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display : -webkit-flex;
|
||||
display : flex;
|
||||
}
|
||||
.flex-h {
|
||||
-webkit-box-orient: horizontal;
|
||||
-moz-box-orient: horizontal;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
.flex-v {
|
||||
-webkit-box-orient: vertical;
|
||||
-moz-box-orient: vertical;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex-fluid {
|
||||
-moz-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-moz-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
.flex-start {
|
||||
-webkit-box-ordinal-group: -1;
|
||||
-moz-box-ordinal-group: 0;
|
||||
-ms-flex-order : -1;
|
||||
-webkit-order : -1;
|
||||
-moz-order : -1;
|
||||
order : -1;
|
||||
}
|
||||
.flex-mid {
|
||||
-webkit-box-ordinal-group: 1;
|
||||
-moz-box-ordinal-group: 1;
|
||||
-ms-flex-order : 1;
|
||||
-webkit-order : 1;
|
||||
-moz-order : 1;
|
||||
order : 1;
|
||||
}
|
||||
.flex-end {
|
||||
-webkit-box-ordinal-group: 42;
|
||||
-moz-box-ordinal-group: 42;
|
||||
-ms-flex-order : 42;
|
||||
-webkit-order : 42;
|
||||
-moz-order : 42;
|
||||
order : 42;
|
||||
}
|
||||
69
less/_08-print.less
Normal file
69
less/_08-print.less
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
/* 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.
27
less/knacss.less
Normal file
27
less/knacss.less
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
/*!
|
||||
* www.KNACSS.com V2.9.2 (2014-01) @author: Raphael Goetter, Alsacreations
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
|
||||
// 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