Compare commits
No commits in common. "master" and "v8.1" have entirely different histories.
12 changed files with 386 additions and 543 deletions
39
README.md
39
README.md
|
|
@ -1,8 +1,12 @@
|
||||||
# KNACSS
|
# KNACSS
|
||||||
|
|
||||||
**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.**
|
<https://www.knacss.com/>
|
||||||
|
|
||||||
## Documentation version v8 (v8 = Reborn)
|
KNACSS, c'est une sorte de feuille de style CSS "reset" sur-vitaminée qui permet de commencer un projet à partir de zéro tout en tenant compte de bonnes pratiques générales (accessibilité, performance, responsive webdesign, grille de mise en forme).
|
||||||
|
|
||||||
|
**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.**
|
||||||
|
|
||||||
|
## Documentation version actuelle (v8 = Reborn)
|
||||||
|
|
||||||
- Site web de présentation de KNACSS Reborn : <https://www.knacss.com/>
|
- Site web de présentation de KNACSS Reborn : <https://www.knacss.com/>
|
||||||
- [**Documentation KNACSS Reborn**](https://www.knacss.com/doc.html)
|
- [**Documentation KNACSS Reborn**](https://www.knacss.com/doc.html)
|
||||||
|
|
@ -12,3 +16,34 @@
|
||||||
- [**Documentation KNACSS v7**](https://www.knacss.com/doc-old.html)
|
- [**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)
|
- [**Pense-bête PDF KNACSS v7**](https://www.knacss.com/assets/pdf/knacss7-cheatsheet.pdf)
|
||||||
|
|
||||||
|
## Modulaire
|
||||||
|
|
||||||
|
Principe de briques modulaires :
|
||||||
|
|
||||||
|
- KNACSS Reborn est constitué uniquement des fichiers "Core".
|
||||||
|
- Les fichiers "Utils" seront des briques optionnelles (= les `@import` seront commentés par défaut).
|
||||||
|
|
||||||
|
```scss
|
||||||
|
// CORE
|
||||||
|
@import "abstracts/variables-sass";
|
||||||
|
|
||||||
|
@import "base/reset-base";
|
||||||
|
@import "base/reset-accessibility";
|
||||||
|
@import "base/reset-forms";
|
||||||
|
@import "base/reset-print";
|
||||||
|
@import "base/layout";
|
||||||
|
|
||||||
|
@import "abstracts/mixins-sass";
|
||||||
|
|
||||||
|
// UTILITY CLASSES
|
||||||
|
@import "utils/utils-global";
|
||||||
|
@import "utils/utils-spacers";
|
||||||
|
@import "utils/grillade";
|
||||||
|
|
||||||
|
// COMPONENTS (add them only if you need)
|
||||||
|
// @import "components/button";
|
||||||
|
// @import "components/burger";
|
||||||
|
// @import "components/checkbox";
|
||||||
|
// @import "components/radio";
|
||||||
|
// @import "components/quote";
|
||||||
|
```
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,5 @@
|
||||||
# Changelog
|
# 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
|
- 5 janvier 2022 (8.1) : refonte des variables de couleur
|
||||||
- 9 juillet 2021 (8.0.5) : suppression min-height: 0 par défaut
|
- 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
|
- 26 avril 2021 : taille de base 100% (et non plus 62.5%) et corrections Grillade
|
||||||
|
|
@ -97,7 +95,7 @@ Né en 2012 et après près de 10 années de bons et loyaux services, le projet
|
||||||
- regroupement des styles des tableaux
|
- regroupement des styles des tableaux
|
||||||
- renommage des variables couleur de projets
|
- renommage des variables couleur de projets
|
||||||
- renommage des variables de composants
|
- renommage des variables de composants
|
||||||
- renommage des variables d'espacement (`$tiny-value` -> `$spacer-micro`)
|
- renommage des variables d'espacement (`$tiny-value` -> `$spacer-tiny`)
|
||||||
- automatisation des classes utilitaires via Sass
|
- automatisation des classes utilitaires via Sass
|
||||||
- suppression du namespace "kna-"
|
- suppression du namespace "kna-"
|
||||||
- refonte :
|
- refonte :
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
/*!
|
/*!
|
||||||
* KNACSS Reborn: Just keep it simple!
|
* KNACSS Reborn: Just keep it simple!
|
||||||
* @author: Alsacreations
|
* @author: Alsacreations
|
||||||
* v8.2 2022/01
|
* v8.1 2022/01
|
||||||
* Licence WTFPL http://www.wtfpl.net/
|
* Licence WTFPL http://www.wtfpl.net/
|
||||||
*/
|
*/
|
||||||
/* ----------------------------- */
|
/* ----------------------------- */
|
||||||
|
|
@ -38,7 +38,7 @@ html {
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: -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: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
background-color: #FFFFFF;
|
background-color: #FFFFFF;
|
||||||
|
|
@ -121,7 +121,7 @@ h6,
|
||||||
dt,
|
dt,
|
||||||
dd {
|
dd {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -422,7 +422,7 @@ fieldset {
|
||||||
legend {
|
legend {
|
||||||
display: table;
|
display: table;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0 0.25rem;
|
padding: 0 0.125rem;
|
||||||
border: 0;
|
border: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
|
|
@ -623,19 +623,19 @@ template {
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
.layout-maxed {
|
.layout-maxed {
|
||||||
grid-template-columns: minmax(0.75rem, 1fr) minmax(auto, 576px) minmax(0.75rem, 1fr);
|
grid-template-columns: minmax(0.5rem, 1fr) minmax(auto, 576px) minmax(0.5rem, 1fr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
.layout-maxed {
|
.layout-maxed {
|
||||||
grid-template-columns: minmax(0.75rem, 1fr) minmax(auto, 992px) minmax(0.75rem, 1fr);
|
grid-template-columns: minmax(0.5rem, 1fr) minmax(auto, 992px) minmax(0.5rem, 1fr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1400px) {
|
@media (min-width: 1400px) {
|
||||||
.layout-maxed {
|
.layout-maxed {
|
||||||
grid-template-columns: minmax(0.75rem, 1fr) minmax(auto, 1400px) minmax(0.75rem, 1fr);
|
grid-template-columns: minmax(0.5rem, 1fr) minmax(auto, 1400px) minmax(0.5rem, 1fr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -749,8 +749,8 @@ template {
|
||||||
font-size: smaller;
|
font-size: smaller;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-larger {
|
.text-bigger {
|
||||||
font-size: larger;
|
font-size: bigger;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-left {
|
.text-left {
|
||||||
|
|
@ -1288,20 +1288,20 @@ template {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
.sm\:text-larger {
|
.sm\:text-bigger {
|
||||||
font-size: larger;
|
font-size: bigger;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
.md\:text-larger {
|
.md\:text-bigger {
|
||||||
font-size: larger;
|
font-size: bigger;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1400px) {
|
@media (min-width: 1400px) {
|
||||||
.lg\:text-larger {
|
.lg\:text-bigger {
|
||||||
font-size: larger;
|
font-size: bigger;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2576,213 +2576,6 @@ template {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-1 {
|
|
||||||
padding: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pt-1 {
|
|
||||||
padding-top: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pr-1 {
|
|
||||||
padding-right: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pb-1 {
|
|
||||||
padding-bottom: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pl-1 {
|
|
||||||
padding-left: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.px-1 {
|
|
||||||
padding-left: 1px;
|
|
||||||
padding-right: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.py-1 {
|
|
||||||
padding-top: 1px;
|
|
||||||
padding-bottom: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.m-1 {
|
|
||||||
margin: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mt-1 {
|
|
||||||
margin-top: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mr-1 {
|
|
||||||
margin-right: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mb-1 {
|
|
||||||
margin-bottom: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ml-1 {
|
|
||||||
margin-left: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mx-1 {
|
|
||||||
margin-left: 1px;
|
|
||||||
margin-right: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.my-1 {
|
|
||||||
margin-top: 1px;
|
|
||||||
margin-bottom: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
|
||||||
.sm\:p-1 {
|
|
||||||
padding: 1px;
|
|
||||||
}
|
|
||||||
.sm\:pt-1 {
|
|
||||||
padding-top: 1px;
|
|
||||||
}
|
|
||||||
.sm\:pr-1 {
|
|
||||||
padding-right: 1px;
|
|
||||||
}
|
|
||||||
.sm\:pb-1 {
|
|
||||||
padding-bottom: 1px;
|
|
||||||
}
|
|
||||||
.sm\:pl-1 {
|
|
||||||
padding-left: 1px;
|
|
||||||
}
|
|
||||||
.sm\:px-1 {
|
|
||||||
padding-left: 1px;
|
|
||||||
padding-right: 1px;
|
|
||||||
}
|
|
||||||
.sm\:py-1 {
|
|
||||||
padding-top: 1px;
|
|
||||||
padding-bottom: 1px;
|
|
||||||
}
|
|
||||||
.sm\:m-1 {
|
|
||||||
margin: 1px;
|
|
||||||
}
|
|
||||||
.sm\:mt-1 {
|
|
||||||
margin-top: 1px;
|
|
||||||
}
|
|
||||||
.sm\:mr-1 {
|
|
||||||
margin-right: 1px;
|
|
||||||
}
|
|
||||||
.sm\:mb-1 {
|
|
||||||
margin-bottom: 1px;
|
|
||||||
}
|
|
||||||
.sm\:ml-1 {
|
|
||||||
margin-left: 1px;
|
|
||||||
}
|
|
||||||
.sm\:mx-1 {
|
|
||||||
margin-left: 1px;
|
|
||||||
margin-right: 1px;
|
|
||||||
}
|
|
||||||
.sm\:my-1 {
|
|
||||||
margin-top: 1px;
|
|
||||||
margin-bottom: 1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
|
||||||
.md\:p-1 {
|
|
||||||
padding: 1px;
|
|
||||||
}
|
|
||||||
.md\:pt-1 {
|
|
||||||
padding-top: 1px;
|
|
||||||
}
|
|
||||||
.md\:pr-1 {
|
|
||||||
padding-right: 1px;
|
|
||||||
}
|
|
||||||
.md\:pb-1 {
|
|
||||||
padding-bottom: 1px;
|
|
||||||
}
|
|
||||||
.md\:pl-1 {
|
|
||||||
padding-left: 1px;
|
|
||||||
}
|
|
||||||
.md\:px-1 {
|
|
||||||
padding-left: 1px;
|
|
||||||
padding-right: 1px;
|
|
||||||
}
|
|
||||||
.md\:py-1 {
|
|
||||||
padding-top: 1px;
|
|
||||||
padding-bottom: 1px;
|
|
||||||
}
|
|
||||||
.md\:m-1 {
|
|
||||||
margin: 1px;
|
|
||||||
}
|
|
||||||
.md\:mt-1 {
|
|
||||||
margin-top: 1px;
|
|
||||||
}
|
|
||||||
.md\:mr-1 {
|
|
||||||
margin-right: 1px;
|
|
||||||
}
|
|
||||||
.md\:mb-1 {
|
|
||||||
margin-bottom: 1px;
|
|
||||||
}
|
|
||||||
.md\:ml-1 {
|
|
||||||
margin-left: 1px;
|
|
||||||
}
|
|
||||||
.md\:mx-1 {
|
|
||||||
margin-left: 1px;
|
|
||||||
margin-right: 1px;
|
|
||||||
}
|
|
||||||
.md\:my-1 {
|
|
||||||
margin-top: 1px;
|
|
||||||
margin-bottom: 1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1400px) {
|
|
||||||
.lg\:p-1 {
|
|
||||||
padding: 1px;
|
|
||||||
}
|
|
||||||
.lg\:pt-1 {
|
|
||||||
padding-top: 1px;
|
|
||||||
}
|
|
||||||
.lg\:pr-1 {
|
|
||||||
padding-right: 1px;
|
|
||||||
}
|
|
||||||
.lg\:pb-1 {
|
|
||||||
padding-bottom: 1px;
|
|
||||||
}
|
|
||||||
.lg\:pl-1 {
|
|
||||||
padding-left: 1px;
|
|
||||||
}
|
|
||||||
.lg\:px-1 {
|
|
||||||
padding-left: 1px;
|
|
||||||
padding-right: 1px;
|
|
||||||
}
|
|
||||||
.lg\:py-1 {
|
|
||||||
padding-top: 1px;
|
|
||||||
padding-bottom: 1px;
|
|
||||||
}
|
|
||||||
.lg\:m-1 {
|
|
||||||
margin: 1px;
|
|
||||||
}
|
|
||||||
.lg\:mt-1 {
|
|
||||||
margin-top: 1px;
|
|
||||||
}
|
|
||||||
.lg\:mr-1 {
|
|
||||||
margin-right: 1px;
|
|
||||||
}
|
|
||||||
.lg\:mb-1 {
|
|
||||||
margin-bottom: 1px;
|
|
||||||
}
|
|
||||||
.lg\:ml-1 {
|
|
||||||
margin-left: 1px;
|
|
||||||
}
|
|
||||||
.lg\:mx-1 {
|
|
||||||
margin-left: 1px;
|
|
||||||
margin-right: 1px;
|
|
||||||
}
|
|
||||||
.lg\:my-1 {
|
|
||||||
margin-top: 1px;
|
|
||||||
margin-bottom: 1px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-2 {
|
.p-2 {
|
||||||
padding: 0.125rem;
|
padding: 0.125rem;
|
||||||
}
|
}
|
||||||
|
|
@ -2990,210 +2783,210 @@ template {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-4 {
|
.p-5 {
|
||||||
padding: 0.25rem;
|
padding: 0.313rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pt-4 {
|
.pt-5 {
|
||||||
padding-top: 0.25rem;
|
padding-top: 0.313rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pr-4 {
|
.pr-5 {
|
||||||
padding-right: 0.25rem;
|
padding-right: 0.313rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pb-4 {
|
.pb-5 {
|
||||||
padding-bottom: 0.25rem;
|
padding-bottom: 0.313rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pl-4 {
|
.pl-5 {
|
||||||
padding-left: 0.25rem;
|
padding-left: 0.313rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.px-4 {
|
.px-5 {
|
||||||
padding-left: 0.25rem;
|
padding-left: 0.313rem;
|
||||||
padding-right: 0.25rem;
|
padding-right: 0.313rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.py-4 {
|
.py-5 {
|
||||||
padding-top: 0.25rem;
|
padding-top: 0.313rem;
|
||||||
padding-bottom: 0.25rem;
|
padding-bottom: 0.313rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.m-4 {
|
.m-5 {
|
||||||
margin: 0.25rem;
|
margin: 0.313rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mt-4 {
|
.mt-5 {
|
||||||
margin-top: 0.25rem;
|
margin-top: 0.313rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mr-4 {
|
.mr-5 {
|
||||||
margin-right: 0.25rem;
|
margin-right: 0.313rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mb-4 {
|
.mb-5 {
|
||||||
margin-bottom: 0.25rem;
|
margin-bottom: 0.313rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ml-4 {
|
.ml-5 {
|
||||||
margin-left: 0.25rem;
|
margin-left: 0.313rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx-4 {
|
.mx-5 {
|
||||||
margin-left: 0.25rem;
|
margin-left: 0.313rem;
|
||||||
margin-right: 0.25rem;
|
margin-right: 0.313rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-4 {
|
.my-5 {
|
||||||
margin-top: 0.25rem;
|
margin-top: 0.313rem;
|
||||||
margin-bottom: 0.25rem;
|
margin-bottom: 0.313rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
.sm\:p-4 {
|
.sm\:p-5 {
|
||||||
padding: 0.25rem;
|
padding: 0.313rem;
|
||||||
}
|
}
|
||||||
.sm\:pt-4 {
|
.sm\:pt-5 {
|
||||||
padding-top: 0.25rem;
|
padding-top: 0.313rem;
|
||||||
}
|
}
|
||||||
.sm\:pr-4 {
|
.sm\:pr-5 {
|
||||||
padding-right: 0.25rem;
|
padding-right: 0.313rem;
|
||||||
}
|
}
|
||||||
.sm\:pb-4 {
|
.sm\:pb-5 {
|
||||||
padding-bottom: 0.25rem;
|
padding-bottom: 0.313rem;
|
||||||
}
|
}
|
||||||
.sm\:pl-4 {
|
.sm\:pl-5 {
|
||||||
padding-left: 0.25rem;
|
padding-left: 0.313rem;
|
||||||
}
|
}
|
||||||
.sm\:px-4 {
|
.sm\:px-5 {
|
||||||
padding-left: 0.25rem;
|
padding-left: 0.313rem;
|
||||||
padding-right: 0.25rem;
|
padding-right: 0.313rem;
|
||||||
}
|
}
|
||||||
.sm\:py-4 {
|
.sm\:py-5 {
|
||||||
padding-top: 0.25rem;
|
padding-top: 0.313rem;
|
||||||
padding-bottom: 0.25rem;
|
padding-bottom: 0.313rem;
|
||||||
}
|
}
|
||||||
.sm\:m-4 {
|
.sm\:m-5 {
|
||||||
margin: 0.25rem;
|
margin: 0.313rem;
|
||||||
}
|
}
|
||||||
.sm\:mt-4 {
|
.sm\:mt-5 {
|
||||||
margin-top: 0.25rem;
|
margin-top: 0.313rem;
|
||||||
}
|
}
|
||||||
.sm\:mr-4 {
|
.sm\:mr-5 {
|
||||||
margin-right: 0.25rem;
|
margin-right: 0.313rem;
|
||||||
}
|
}
|
||||||
.sm\:mb-4 {
|
.sm\:mb-5 {
|
||||||
margin-bottom: 0.25rem;
|
margin-bottom: 0.313rem;
|
||||||
}
|
}
|
||||||
.sm\:ml-4 {
|
.sm\:ml-5 {
|
||||||
margin-left: 0.25rem;
|
margin-left: 0.313rem;
|
||||||
}
|
}
|
||||||
.sm\:mx-4 {
|
.sm\:mx-5 {
|
||||||
margin-left: 0.25rem;
|
margin-left: 0.313rem;
|
||||||
margin-right: 0.25rem;
|
margin-right: 0.313rem;
|
||||||
}
|
}
|
||||||
.sm\:my-4 {
|
.sm\:my-5 {
|
||||||
margin-top: 0.25rem;
|
margin-top: 0.313rem;
|
||||||
margin-bottom: 0.25rem;
|
margin-bottom: 0.313rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
.md\:p-4 {
|
.md\:p-5 {
|
||||||
padding: 0.25rem;
|
padding: 0.313rem;
|
||||||
}
|
}
|
||||||
.md\:pt-4 {
|
.md\:pt-5 {
|
||||||
padding-top: 0.25rem;
|
padding-top: 0.313rem;
|
||||||
}
|
}
|
||||||
.md\:pr-4 {
|
.md\:pr-5 {
|
||||||
padding-right: 0.25rem;
|
padding-right: 0.313rem;
|
||||||
}
|
}
|
||||||
.md\:pb-4 {
|
.md\:pb-5 {
|
||||||
padding-bottom: 0.25rem;
|
padding-bottom: 0.313rem;
|
||||||
}
|
}
|
||||||
.md\:pl-4 {
|
.md\:pl-5 {
|
||||||
padding-left: 0.25rem;
|
padding-left: 0.313rem;
|
||||||
}
|
}
|
||||||
.md\:px-4 {
|
.md\:px-5 {
|
||||||
padding-left: 0.25rem;
|
padding-left: 0.313rem;
|
||||||
padding-right: 0.25rem;
|
padding-right: 0.313rem;
|
||||||
}
|
}
|
||||||
.md\:py-4 {
|
.md\:py-5 {
|
||||||
padding-top: 0.25rem;
|
padding-top: 0.313rem;
|
||||||
padding-bottom: 0.25rem;
|
padding-bottom: 0.313rem;
|
||||||
}
|
}
|
||||||
.md\:m-4 {
|
.md\:m-5 {
|
||||||
margin: 0.25rem;
|
margin: 0.313rem;
|
||||||
}
|
}
|
||||||
.md\:mt-4 {
|
.md\:mt-5 {
|
||||||
margin-top: 0.25rem;
|
margin-top: 0.313rem;
|
||||||
}
|
}
|
||||||
.md\:mr-4 {
|
.md\:mr-5 {
|
||||||
margin-right: 0.25rem;
|
margin-right: 0.313rem;
|
||||||
}
|
}
|
||||||
.md\:mb-4 {
|
.md\:mb-5 {
|
||||||
margin-bottom: 0.25rem;
|
margin-bottom: 0.313rem;
|
||||||
}
|
}
|
||||||
.md\:ml-4 {
|
.md\:ml-5 {
|
||||||
margin-left: 0.25rem;
|
margin-left: 0.313rem;
|
||||||
}
|
}
|
||||||
.md\:mx-4 {
|
.md\:mx-5 {
|
||||||
margin-left: 0.25rem;
|
margin-left: 0.313rem;
|
||||||
margin-right: 0.25rem;
|
margin-right: 0.313rem;
|
||||||
}
|
}
|
||||||
.md\:my-4 {
|
.md\:my-5 {
|
||||||
margin-top: 0.25rem;
|
margin-top: 0.313rem;
|
||||||
margin-bottom: 0.25rem;
|
margin-bottom: 0.313rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1400px) {
|
@media (min-width: 1400px) {
|
||||||
.lg\:p-4 {
|
.lg\:p-5 {
|
||||||
padding: 0.25rem;
|
padding: 0.313rem;
|
||||||
}
|
}
|
||||||
.lg\:pt-4 {
|
.lg\:pt-5 {
|
||||||
padding-top: 0.25rem;
|
padding-top: 0.313rem;
|
||||||
}
|
}
|
||||||
.lg\:pr-4 {
|
.lg\:pr-5 {
|
||||||
padding-right: 0.25rem;
|
padding-right: 0.313rem;
|
||||||
}
|
}
|
||||||
.lg\:pb-4 {
|
.lg\:pb-5 {
|
||||||
padding-bottom: 0.25rem;
|
padding-bottom: 0.313rem;
|
||||||
}
|
}
|
||||||
.lg\:pl-4 {
|
.lg\:pl-5 {
|
||||||
padding-left: 0.25rem;
|
padding-left: 0.313rem;
|
||||||
}
|
}
|
||||||
.lg\:px-4 {
|
.lg\:px-5 {
|
||||||
padding-left: 0.25rem;
|
padding-left: 0.313rem;
|
||||||
padding-right: 0.25rem;
|
padding-right: 0.313rem;
|
||||||
}
|
}
|
||||||
.lg\:py-4 {
|
.lg\:py-5 {
|
||||||
padding-top: 0.25rem;
|
padding-top: 0.313rem;
|
||||||
padding-bottom: 0.25rem;
|
padding-bottom: 0.313rem;
|
||||||
}
|
}
|
||||||
.lg\:m-4 {
|
.lg\:m-5 {
|
||||||
margin: 0.25rem;
|
margin: 0.313rem;
|
||||||
}
|
}
|
||||||
.lg\:mt-4 {
|
.lg\:mt-5 {
|
||||||
margin-top: 0.25rem;
|
margin-top: 0.313rem;
|
||||||
}
|
}
|
||||||
.lg\:mr-4 {
|
.lg\:mr-5 {
|
||||||
margin-right: 0.25rem;
|
margin-right: 0.313rem;
|
||||||
}
|
}
|
||||||
.lg\:mb-4 {
|
.lg\:mb-5 {
|
||||||
margin-bottom: 0.25rem;
|
margin-bottom: 0.313rem;
|
||||||
}
|
}
|
||||||
.lg\:ml-4 {
|
.lg\:ml-5 {
|
||||||
margin-left: 0.25rem;
|
margin-left: 0.313rem;
|
||||||
}
|
}
|
||||||
.lg\:mx-4 {
|
.lg\:mx-5 {
|
||||||
margin-left: 0.25rem;
|
margin-left: 0.313rem;
|
||||||
margin-right: 0.25rem;
|
margin-right: 0.313rem;
|
||||||
}
|
}
|
||||||
.lg\:my-4 {
|
.lg\:my-5 {
|
||||||
margin-top: 0.25rem;
|
margin-top: 0.313rem;
|
||||||
margin-bottom: 0.25rem;
|
margin-bottom: 0.313rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -3404,210 +3197,210 @@ template {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-12 {
|
.p-10 {
|
||||||
padding: 0.75rem;
|
padding: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pt-12 {
|
.pt-10 {
|
||||||
padding-top: 0.75rem;
|
padding-top: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pr-12 {
|
.pr-10 {
|
||||||
padding-right: 0.75rem;
|
padding-right: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pb-12 {
|
.pb-10 {
|
||||||
padding-bottom: 0.75rem;
|
padding-bottom: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pl-12 {
|
.pl-10 {
|
||||||
padding-left: 0.75rem;
|
padding-left: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.px-12 {
|
.px-10 {
|
||||||
padding-left: 0.75rem;
|
padding-left: 0.625rem;
|
||||||
padding-right: 0.75rem;
|
padding-right: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.py-12 {
|
.py-10 {
|
||||||
padding-top: 0.75rem;
|
padding-top: 0.625rem;
|
||||||
padding-bottom: 0.75rem;
|
padding-bottom: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.m-12 {
|
.m-10 {
|
||||||
margin: 0.75rem;
|
margin: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mt-12 {
|
.mt-10 {
|
||||||
margin-top: 0.75rem;
|
margin-top: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mr-12 {
|
.mr-10 {
|
||||||
margin-right: 0.75rem;
|
margin-right: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mb-12 {
|
.mb-10 {
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ml-12 {
|
.ml-10 {
|
||||||
margin-left: 0.75rem;
|
margin-left: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx-12 {
|
.mx-10 {
|
||||||
margin-left: 0.75rem;
|
margin-left: 0.625rem;
|
||||||
margin-right: 0.75rem;
|
margin-right: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-12 {
|
.my-10 {
|
||||||
margin-top: 0.75rem;
|
margin-top: 0.625rem;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
.sm\:p-12 {
|
.sm\:p-10 {
|
||||||
padding: 0.75rem;
|
padding: 0.625rem;
|
||||||
}
|
}
|
||||||
.sm\:pt-12 {
|
.sm\:pt-10 {
|
||||||
padding-top: 0.75rem;
|
padding-top: 0.625rem;
|
||||||
}
|
}
|
||||||
.sm\:pr-12 {
|
.sm\:pr-10 {
|
||||||
padding-right: 0.75rem;
|
padding-right: 0.625rem;
|
||||||
}
|
}
|
||||||
.sm\:pb-12 {
|
.sm\:pb-10 {
|
||||||
padding-bottom: 0.75rem;
|
padding-bottom: 0.625rem;
|
||||||
}
|
}
|
||||||
.sm\:pl-12 {
|
.sm\:pl-10 {
|
||||||
padding-left: 0.75rem;
|
padding-left: 0.625rem;
|
||||||
}
|
}
|
||||||
.sm\:px-12 {
|
.sm\:px-10 {
|
||||||
padding-left: 0.75rem;
|
padding-left: 0.625rem;
|
||||||
padding-right: 0.75rem;
|
padding-right: 0.625rem;
|
||||||
}
|
}
|
||||||
.sm\:py-12 {
|
.sm\:py-10 {
|
||||||
padding-top: 0.75rem;
|
padding-top: 0.625rem;
|
||||||
padding-bottom: 0.75rem;
|
padding-bottom: 0.625rem;
|
||||||
}
|
}
|
||||||
.sm\:m-12 {
|
.sm\:m-10 {
|
||||||
margin: 0.75rem;
|
margin: 0.625rem;
|
||||||
}
|
}
|
||||||
.sm\:mt-12 {
|
.sm\:mt-10 {
|
||||||
margin-top: 0.75rem;
|
margin-top: 0.625rem;
|
||||||
}
|
}
|
||||||
.sm\:mr-12 {
|
.sm\:mr-10 {
|
||||||
margin-right: 0.75rem;
|
margin-right: 0.625rem;
|
||||||
}
|
}
|
||||||
.sm\:mb-12 {
|
.sm\:mb-10 {
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.625rem;
|
||||||
}
|
}
|
||||||
.sm\:ml-12 {
|
.sm\:ml-10 {
|
||||||
margin-left: 0.75rem;
|
margin-left: 0.625rem;
|
||||||
}
|
}
|
||||||
.sm\:mx-12 {
|
.sm\:mx-10 {
|
||||||
margin-left: 0.75rem;
|
margin-left: 0.625rem;
|
||||||
margin-right: 0.75rem;
|
margin-right: 0.625rem;
|
||||||
}
|
}
|
||||||
.sm\:my-12 {
|
.sm\:my-10 {
|
||||||
margin-top: 0.75rem;
|
margin-top: 0.625rem;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.625rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
.md\:p-12 {
|
.md\:p-10 {
|
||||||
padding: 0.75rem;
|
padding: 0.625rem;
|
||||||
}
|
}
|
||||||
.md\:pt-12 {
|
.md\:pt-10 {
|
||||||
padding-top: 0.75rem;
|
padding-top: 0.625rem;
|
||||||
}
|
}
|
||||||
.md\:pr-12 {
|
.md\:pr-10 {
|
||||||
padding-right: 0.75rem;
|
padding-right: 0.625rem;
|
||||||
}
|
}
|
||||||
.md\:pb-12 {
|
.md\:pb-10 {
|
||||||
padding-bottom: 0.75rem;
|
padding-bottom: 0.625rem;
|
||||||
}
|
}
|
||||||
.md\:pl-12 {
|
.md\:pl-10 {
|
||||||
padding-left: 0.75rem;
|
padding-left: 0.625rem;
|
||||||
}
|
}
|
||||||
.md\:px-12 {
|
.md\:px-10 {
|
||||||
padding-left: 0.75rem;
|
padding-left: 0.625rem;
|
||||||
padding-right: 0.75rem;
|
padding-right: 0.625rem;
|
||||||
}
|
}
|
||||||
.md\:py-12 {
|
.md\:py-10 {
|
||||||
padding-top: 0.75rem;
|
padding-top: 0.625rem;
|
||||||
padding-bottom: 0.75rem;
|
padding-bottom: 0.625rem;
|
||||||
}
|
}
|
||||||
.md\:m-12 {
|
.md\:m-10 {
|
||||||
margin: 0.75rem;
|
margin: 0.625rem;
|
||||||
}
|
}
|
||||||
.md\:mt-12 {
|
.md\:mt-10 {
|
||||||
margin-top: 0.75rem;
|
margin-top: 0.625rem;
|
||||||
}
|
}
|
||||||
.md\:mr-12 {
|
.md\:mr-10 {
|
||||||
margin-right: 0.75rem;
|
margin-right: 0.625rem;
|
||||||
}
|
}
|
||||||
.md\:mb-12 {
|
.md\:mb-10 {
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.625rem;
|
||||||
}
|
}
|
||||||
.md\:ml-12 {
|
.md\:ml-10 {
|
||||||
margin-left: 0.75rem;
|
margin-left: 0.625rem;
|
||||||
}
|
}
|
||||||
.md\:mx-12 {
|
.md\:mx-10 {
|
||||||
margin-left: 0.75rem;
|
margin-left: 0.625rem;
|
||||||
margin-right: 0.75rem;
|
margin-right: 0.625rem;
|
||||||
}
|
}
|
||||||
.md\:my-12 {
|
.md\:my-10 {
|
||||||
margin-top: 0.75rem;
|
margin-top: 0.625rem;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.625rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1400px) {
|
@media (min-width: 1400px) {
|
||||||
.lg\:p-12 {
|
.lg\:p-10 {
|
||||||
padding: 0.75rem;
|
padding: 0.625rem;
|
||||||
}
|
}
|
||||||
.lg\:pt-12 {
|
.lg\:pt-10 {
|
||||||
padding-top: 0.75rem;
|
padding-top: 0.625rem;
|
||||||
}
|
}
|
||||||
.lg\:pr-12 {
|
.lg\:pr-10 {
|
||||||
padding-right: 0.75rem;
|
padding-right: 0.625rem;
|
||||||
}
|
}
|
||||||
.lg\:pb-12 {
|
.lg\:pb-10 {
|
||||||
padding-bottom: 0.75rem;
|
padding-bottom: 0.625rem;
|
||||||
}
|
}
|
||||||
.lg\:pl-12 {
|
.lg\:pl-10 {
|
||||||
padding-left: 0.75rem;
|
padding-left: 0.625rem;
|
||||||
}
|
}
|
||||||
.lg\:px-12 {
|
.lg\:px-10 {
|
||||||
padding-left: 0.75rem;
|
padding-left: 0.625rem;
|
||||||
padding-right: 0.75rem;
|
padding-right: 0.625rem;
|
||||||
}
|
}
|
||||||
.lg\:py-12 {
|
.lg\:py-10 {
|
||||||
padding-top: 0.75rem;
|
padding-top: 0.625rem;
|
||||||
padding-bottom: 0.75rem;
|
padding-bottom: 0.625rem;
|
||||||
}
|
}
|
||||||
.lg\:m-12 {
|
.lg\:m-10 {
|
||||||
margin: 0.75rem;
|
margin: 0.625rem;
|
||||||
}
|
}
|
||||||
.lg\:mt-12 {
|
.lg\:mt-10 {
|
||||||
margin-top: 0.75rem;
|
margin-top: 0.625rem;
|
||||||
}
|
}
|
||||||
.lg\:mr-12 {
|
.lg\:mr-10 {
|
||||||
margin-right: 0.75rem;
|
margin-right: 0.625rem;
|
||||||
}
|
}
|
||||||
.lg\:mb-12 {
|
.lg\:mb-10 {
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.625rem;
|
||||||
}
|
}
|
||||||
.lg\:ml-12 {
|
.lg\:ml-10 {
|
||||||
margin-left: 0.75rem;
|
margin-left: 0.625rem;
|
||||||
}
|
}
|
||||||
.lg\:mx-12 {
|
.lg\:mx-10 {
|
||||||
margin-left: 0.75rem;
|
margin-left: 0.625rem;
|
||||||
margin-right: 0.75rem;
|
margin-right: 0.625rem;
|
||||||
}
|
}
|
||||||
.lg\:my-12 {
|
.lg\:my-10 {
|
||||||
margin-top: 0.75rem;
|
margin-top: 0.625rem;
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.625rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -4,6 +4,7 @@ var postcss = require('gulp-postcss');
|
||||||
var CombineMQ = require('postcss-combine-media-query');
|
var CombineMQ = require('postcss-combine-media-query');
|
||||||
var autoprefixer = require('autoprefixer');
|
var autoprefixer = require('autoprefixer');
|
||||||
var CSSnano = require('cssnano');
|
var CSSnano = require('cssnano');
|
||||||
|
var rename = require('gulp-rename');
|
||||||
|
|
||||||
gulp.task('css:full', () => {
|
gulp.task('css:full', () => {
|
||||||
return gulp.src('sass/knacss.scss')
|
return gulp.src('sass/knacss.scss')
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "knacss",
|
"name": "knacss",
|
||||||
"version": "8.2.1",
|
"version": "8.1",
|
||||||
"homepage": "http://www.knacss.com/",
|
"homepage": "http://www.knacss.com/",
|
||||||
"bugs": "https://github.com/alsacreations/KNACSS/issues",
|
"bugs": "https://github.com/alsacreations/KNACSS/issues",
|
||||||
"author": "Raphaël GOETTER, Alsacreations (http://www.alsacreations.fr)",
|
"author": "Raphaël GOETTER, Alsacreations (http://www.alsacreations.fr)",
|
||||||
|
|
@ -32,6 +32,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"autoprefixer": "^9.7.1",
|
"autoprefixer": "^9.7.1",
|
||||||
"postcss-combine-media-query": "^1.0.1",
|
"postcss-combine-media-query": "^1.0.1",
|
||||||
"cssnano": "^4.1.10"
|
"cssnano": "^4.1.10",
|
||||||
|
"gulp-rename": "^2.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,8 +7,7 @@
|
||||||
// ----------------
|
// ----------------
|
||||||
|
|
||||||
// Hypothèse : smartphone portrait/paysage < 576px < gros smartphone paysage + tablette portrait < 992px < tablette paysage < 1330px < laptop et plus
|
// Hypothèse : smartphone portrait/paysage < 576px < gros smartphone paysage + tablette portrait < 992px < tablette paysage < 1330px < laptop et plus
|
||||||
$breakpoints: (
|
$breakpoints: (sm: 576px,
|
||||||
sm: 576px,
|
|
||||||
md: 992px,
|
md: 992px,
|
||||||
lg: 1400px,
|
lg: 1400px,
|
||||||
) !default;
|
) !default;
|
||||||
|
|
@ -21,31 +20,36 @@ $large: map-get($breakpoints, lg) !default;
|
||||||
// Spacers
|
// Spacers
|
||||||
// ----------------
|
// ----------------
|
||||||
|
|
||||||
$spacer: 1rem;
|
$spacers: ("0": 0,
|
||||||
$spacers: (
|
// none
|
||||||
"0": 0, // none
|
"2": 0.125rem,
|
||||||
"1": 1px, // mono
|
// tiny
|
||||||
"2": 0.125rem, // nano
|
"5": 0.313rem,
|
||||||
"4": 0.25rem, // micro
|
// tiny-plus
|
||||||
"8": 0.5rem, // mini
|
"8": 0.5rem,
|
||||||
"12": 0.75rem, // small
|
// small
|
||||||
"16": 1rem, // medium
|
"10": 0.625rem,
|
||||||
"20": 1.25rem, // large
|
// small-plus
|
||||||
"24": 1.5rem, // wide
|
"16": 1rem,
|
||||||
"36": 2.25rem, // ultra
|
// medium
|
||||||
|
"20": 1.25rem,
|
||||||
|
// medium-plus
|
||||||
|
"24": 1.5rem,
|
||||||
|
// large
|
||||||
|
"36": 2.25rem,
|
||||||
|
// large-plus
|
||||||
"auto": auto,
|
"auto": auto,
|
||||||
);
|
) !default;
|
||||||
|
|
||||||
$spacer-none: map-get($spacers, "0");
|
$spacer-none: map-get($spacers, "0") !default;
|
||||||
$spacer-mono: map-get($spacers, "1");
|
$spacer-tiny: map-get($spacers, "2") !default;
|
||||||
$spacer-nano: map-get($spacers, "2");
|
$spacer-tiny-plus: map-get($spacers, "5") !default;
|
||||||
$spacer-micro: map-get($spacers, "4");
|
$spacer-small: map-get($spacers, "8") !default;
|
||||||
$spacer-mini: map-get($spacers, "8");
|
$spacer-small-plus: map-get($spacers, "10") !default;
|
||||||
$spacer-small: map-get($spacers, "12");
|
$spacer-medium: map-get($spacers, "16") !default;
|
||||||
$spacer-medium: map-get($spacers, "16");
|
$spacer-medium-plus: map-get($spacers, "20") !default;
|
||||||
$spacer-large: map-get($spacers, "20");
|
$spacer-large: map-get($spacers, "24") !default;
|
||||||
$spacer-wide: map-get($spacers, "24");
|
$spacer-large-plus: map-get($spacers, "36") !default;
|
||||||
$spacer-ultra: map-get($spacers, "36");
|
|
||||||
|
|
||||||
// ----------------
|
// ----------------
|
||||||
// Grid layout
|
// Grid layout
|
||||||
|
|
@ -53,8 +57,7 @@ $spacer-ultra: map-get($spacers, "36");
|
||||||
|
|
||||||
$grid-columns: 6 !default;
|
$grid-columns: 6 !default;
|
||||||
|
|
||||||
$gaps: (
|
$gaps: ("0": 0,
|
||||||
"0": 0,
|
|
||||||
"5": 0.313rem,
|
"5": 0.313rem,
|
||||||
"10": 0.625rem,
|
"10": 0.625rem,
|
||||||
"16": 1rem,
|
"16": 1rem,
|
||||||
|
|
@ -67,14 +70,24 @@ $gaps: (
|
||||||
// ----------------
|
// ----------------
|
||||||
|
|
||||||
// Familles de 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-base: system-ui,
|
||||||
$font-family-headings: $font-family-base;
|
-apple-system,
|
||||||
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
BlinkMacSystemFont,
|
||||||
|
"Segoe UI",
|
||||||
|
Roboto,
|
||||||
|
Oxygen-Sans,
|
||||||
|
Ubuntu,
|
||||||
|
Cantarell,
|
||||||
|
"Helvetica Neue",
|
||||||
|
sans-serif;
|
||||||
|
$font-family-headings: sans-serif;
|
||||||
|
$font-family-monospace: consolas,
|
||||||
|
courier,
|
||||||
|
monospace;
|
||||||
$line-height-base: 1.5;
|
$line-height-base: 1.5;
|
||||||
|
|
||||||
// Font sizes
|
// Font sizes
|
||||||
$font-size: (
|
$font-size: ("10": 0.625rem,
|
||||||
"10": 0.625rem,
|
|
||||||
"11": 0.6875rem,
|
"11": 0.6875rem,
|
||||||
"12": 0.75rem,
|
"12": 0.75rem,
|
||||||
"14": 0.875rem,
|
"14": 0.875rem,
|
||||||
|
|
@ -132,25 +145,25 @@ $on-secondary: $white; // Contenus affichés par-dessus une couche $secondary
|
||||||
|
|
||||||
// Variables couleurs statuts
|
// Variables couleurs statuts
|
||||||
|
|
||||||
$success-bg: #dff0d9;
|
$success: #dff0d9;
|
||||||
$success-border: #d6e9c6;
|
$success-border: #d6e9c6;
|
||||||
$success: #3c763d;
|
$on-success: #28a745; // contenu sur couche success
|
||||||
$success-hover: #275c28;
|
$on-success-accent: #4d9c4d; // lien sur couche success
|
||||||
|
|
||||||
$info-bg: #d9edf7;
|
$info: #d9edf7;
|
||||||
$info-border: #bce8f1;
|
$info-border: #bce8f1;
|
||||||
$info: #0d7192;
|
$on-info: #17a2b8;
|
||||||
$info-hover: #005e7d;
|
$on-info-accent: #4fa8c4;
|
||||||
|
|
||||||
$warning-bg: #fcf8e3;
|
$warning: #fcf8e3;
|
||||||
$warning-border: #faebcc;
|
$warning-border: #faebcc;
|
||||||
$warning: #8a6d3b;
|
$on-warning: #ffc107;
|
||||||
$warning-hover: #654f29;
|
$on-warning-accent: #d19644;
|
||||||
|
|
||||||
$error-bg: #fff2f2;
|
$error: #fff2f2;
|
||||||
$error-border: #ebccd1;
|
$error-border: #ebccd1;
|
||||||
$error: #e3224a;
|
$on-error: #d9534f;
|
||||||
$error-hover: #a00d10;
|
$on-error-accent: #be4945;
|
||||||
|
|
||||||
|
|
||||||
// Links
|
// Links
|
||||||
|
|
@ -161,7 +174,7 @@ $link-decoration-hover: underline;
|
||||||
$radius-none: 0;
|
$radius-none: 0;
|
||||||
$radius-small: 0.5rem;
|
$radius-small: 0.5rem;
|
||||||
$radius-medium: 1rem;
|
$radius-medium: 1rem;
|
||||||
$radius-large: 20rem;
|
$radius-large: 2rem;
|
||||||
$radius-circle: 50%;
|
$radius-circle: 50%;
|
||||||
|
|
||||||
// ----------------
|
// ----------------
|
||||||
|
|
@ -188,7 +201,7 @@ $utils: ((hidden, display, none),
|
||||||
(text-uppercase, text-transform, uppercase),
|
(text-uppercase, text-transform, uppercase),
|
||||||
(text-lowercase, text-transform, lowercase),
|
(text-lowercase, text-transform, lowercase),
|
||||||
(text-smaller, font-size, smaller),
|
(text-smaller, font-size, smaller),
|
||||||
(text-larger, font-size, larger),
|
(text-bigger, font-size, bigger),
|
||||||
(text-left, text-align, left),
|
(text-left, text-align, left),
|
||||||
(text-center, text-align, center),
|
(text-center, text-align, center),
|
||||||
(text-right, text-align, right),
|
(text-right, text-align, right),
|
||||||
|
|
|
||||||
|
|
@ -112,7 +112,7 @@ fieldset {
|
||||||
legend {
|
legend {
|
||||||
display: table;
|
display: table;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0 $spacer-micro;
|
padding: 0 $spacer-tiny;
|
||||||
border: 0;
|
border: 0;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: $spacer-small $spacer-medium;
|
padding: $spacer-small $spacer-small-plus;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
transition: 0.25s;
|
transition: 0.25s;
|
||||||
|
|
@ -38,12 +38,12 @@
|
||||||
.btn,
|
.btn,
|
||||||
.button {
|
.button {
|
||||||
&--small {
|
&--small {
|
||||||
padding: $spacer-micro-plus $spacer-small;
|
padding: $spacer-tiny-plus $spacer-small;
|
||||||
font-size: .8em;
|
font-size: .8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
&--big {
|
&--big {
|
||||||
padding: $spacer-medium $spacer-medium;
|
padding: $spacer-small-plus $spacer-medium;
|
||||||
font-size: 1.4em;
|
font-size: 1.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -30,13 +30,14 @@ $checkbox-border-radius: 4px;
|
||||||
width: $checkbox-size;
|
width: $checkbox-size;
|
||||||
height: $checkbox-size;
|
height: $checkbox-size;
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
|
outline: 0;
|
||||||
box-shadow: inset 0 0 0 1px $primary;
|
box-shadow: inset 0 0 0 1px $primary;
|
||||||
background-color: $checkbox-color;
|
background-color: $checkbox-color;
|
||||||
transition: background-color 0.15s;
|
transition: background-color 0.15s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox + label {
|
.checkbox+label {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -44,7 +45,7 @@ $checkbox-border-radius: 4px;
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkbox:disabled + label {
|
.checkbox:disabled+label {
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
@ -55,4 +56,4 @@ $checkbox-border-radius: 4px;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-color: $checkbox-background;
|
background-color: $checkbox-background;
|
||||||
}
|
}
|
||||||
|
|
@ -30,13 +30,14 @@ $radio-border-radius: 50%;
|
||||||
width: $radio-size;
|
width: $radio-size;
|
||||||
height: $radio-size;
|
height: $radio-size;
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
|
outline: 0;
|
||||||
box-shadow: inset 0 0 0 1px $primary;
|
box-shadow: inset 0 0 0 1px $primary;
|
||||||
background-color: $radio-background;
|
background-color: $radio-background;
|
||||||
transition: background-size 0.15s;
|
transition: background-size 0.15s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio + label {
|
.radio+label {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -44,7 +45,7 @@ $radio-border-radius: 50%;
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio:disabled + label {
|
.radio:disabled+label {
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
@ -55,4 +56,4 @@ $radio-border-radius: 50%;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-color: $primary;
|
background-color: $primary;
|
||||||
}
|
}
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
/*!
|
/*!
|
||||||
* KNACSS Reborn: Just keep it simple!
|
* KNACSS Reborn: Just keep it simple!
|
||||||
* @author: Alsacreations
|
* @author: Alsacreations
|
||||||
* v8.2 2022/01
|
* v8.1 2022/01
|
||||||
* Licence WTFPL http://www.wtfpl.net/
|
* Licence WTFPL http://www.wtfpl.net/
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue