refonte des variables d'espacement
This commit is contained in:
Raphaël Goetter
parent
59f02b6c57
commit
d9833fe12c
8 changed files with 524 additions and 329 deletions
|
|
@ -1,5 +1,6 @@
|
||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
|
- 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
|
||||||
|
|
@ -95,7 +96,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-tiny`)
|
- renommage des variables d'espacement (`$tiny-value` -> `$spacer-micro`)
|
||||||
- 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.1 2022/01
|
* v8.2 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: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
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-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.5rem;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
@ -422,7 +422,7 @@ fieldset {
|
||||||
legend {
|
legend {
|
||||||
display: table;
|
display: table;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0 0.125rem;
|
padding: 0 0.25rem;
|
||||||
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.5rem, 1fr) minmax(auto, 576px) minmax(0.5rem, 1fr);
|
grid-template-columns: minmax(0.75rem, 1fr) minmax(auto, 576px) minmax(0.75rem, 1fr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
.layout-maxed {
|
.layout-maxed {
|
||||||
grid-template-columns: minmax(0.5rem, 1fr) minmax(auto, 992px) minmax(0.5rem, 1fr);
|
grid-template-columns: minmax(0.75rem, 1fr) minmax(auto, 992px) minmax(0.75rem, 1fr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1400px) {
|
@media (min-width: 1400px) {
|
||||||
.layout-maxed {
|
.layout-maxed {
|
||||||
grid-template-columns: minmax(0.5rem, 1fr) minmax(auto, 1400px) minmax(0.5rem, 1fr);
|
grid-template-columns: minmax(0.75rem, 1fr) minmax(auto, 1400px) minmax(0.75rem, 1fr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -2576,6 +2576,213 @@ 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;
|
||||||
}
|
}
|
||||||
|
|
@ -2783,210 +2990,210 @@ template {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-5 {
|
.p-4 {
|
||||||
padding: 0.313rem;
|
padding: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pt-5 {
|
.pt-4 {
|
||||||
padding-top: 0.313rem;
|
padding-top: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pr-5 {
|
.pr-4 {
|
||||||
padding-right: 0.313rem;
|
padding-right: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pb-5 {
|
.pb-4 {
|
||||||
padding-bottom: 0.313rem;
|
padding-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pl-5 {
|
.pl-4 {
|
||||||
padding-left: 0.313rem;
|
padding-left: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.px-5 {
|
.px-4 {
|
||||||
padding-left: 0.313rem;
|
padding-left: 0.25rem;
|
||||||
padding-right: 0.313rem;
|
padding-right: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.py-5 {
|
.py-4 {
|
||||||
padding-top: 0.313rem;
|
padding-top: 0.25rem;
|
||||||
padding-bottom: 0.313rem;
|
padding-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.m-5 {
|
.m-4 {
|
||||||
margin: 0.313rem;
|
margin: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mt-5 {
|
.mt-4 {
|
||||||
margin-top: 0.313rem;
|
margin-top: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mr-5 {
|
.mr-4 {
|
||||||
margin-right: 0.313rem;
|
margin-right: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mb-5 {
|
.mb-4 {
|
||||||
margin-bottom: 0.313rem;
|
margin-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ml-5 {
|
.ml-4 {
|
||||||
margin-left: 0.313rem;
|
margin-left: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx-5 {
|
.mx-4 {
|
||||||
margin-left: 0.313rem;
|
margin-left: 0.25rem;
|
||||||
margin-right: 0.313rem;
|
margin-right: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-5 {
|
.my-4 {
|
||||||
margin-top: 0.313rem;
|
margin-top: 0.25rem;
|
||||||
margin-bottom: 0.313rem;
|
margin-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
.sm\:p-5 {
|
.sm\:p-4 {
|
||||||
padding: 0.313rem;
|
padding: 0.25rem;
|
||||||
}
|
}
|
||||||
.sm\:pt-5 {
|
.sm\:pt-4 {
|
||||||
padding-top: 0.313rem;
|
padding-top: 0.25rem;
|
||||||
}
|
}
|
||||||
.sm\:pr-5 {
|
.sm\:pr-4 {
|
||||||
padding-right: 0.313rem;
|
padding-right: 0.25rem;
|
||||||
}
|
}
|
||||||
.sm\:pb-5 {
|
.sm\:pb-4 {
|
||||||
padding-bottom: 0.313rem;
|
padding-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
.sm\:pl-5 {
|
.sm\:pl-4 {
|
||||||
padding-left: 0.313rem;
|
padding-left: 0.25rem;
|
||||||
}
|
}
|
||||||
.sm\:px-5 {
|
.sm\:px-4 {
|
||||||
padding-left: 0.313rem;
|
padding-left: 0.25rem;
|
||||||
padding-right: 0.313rem;
|
padding-right: 0.25rem;
|
||||||
}
|
}
|
||||||
.sm\:py-5 {
|
.sm\:py-4 {
|
||||||
padding-top: 0.313rem;
|
padding-top: 0.25rem;
|
||||||
padding-bottom: 0.313rem;
|
padding-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
.sm\:m-5 {
|
.sm\:m-4 {
|
||||||
margin: 0.313rem;
|
margin: 0.25rem;
|
||||||
}
|
}
|
||||||
.sm\:mt-5 {
|
.sm\:mt-4 {
|
||||||
margin-top: 0.313rem;
|
margin-top: 0.25rem;
|
||||||
}
|
}
|
||||||
.sm\:mr-5 {
|
.sm\:mr-4 {
|
||||||
margin-right: 0.313rem;
|
margin-right: 0.25rem;
|
||||||
}
|
}
|
||||||
.sm\:mb-5 {
|
.sm\:mb-4 {
|
||||||
margin-bottom: 0.313rem;
|
margin-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
.sm\:ml-5 {
|
.sm\:ml-4 {
|
||||||
margin-left: 0.313rem;
|
margin-left: 0.25rem;
|
||||||
}
|
}
|
||||||
.sm\:mx-5 {
|
.sm\:mx-4 {
|
||||||
margin-left: 0.313rem;
|
margin-left: 0.25rem;
|
||||||
margin-right: 0.313rem;
|
margin-right: 0.25rem;
|
||||||
}
|
}
|
||||||
.sm\:my-5 {
|
.sm\:my-4 {
|
||||||
margin-top: 0.313rem;
|
margin-top: 0.25rem;
|
||||||
margin-bottom: 0.313rem;
|
margin-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
.md\:p-5 {
|
.md\:p-4 {
|
||||||
padding: 0.313rem;
|
padding: 0.25rem;
|
||||||
}
|
}
|
||||||
.md\:pt-5 {
|
.md\:pt-4 {
|
||||||
padding-top: 0.313rem;
|
padding-top: 0.25rem;
|
||||||
}
|
}
|
||||||
.md\:pr-5 {
|
.md\:pr-4 {
|
||||||
padding-right: 0.313rem;
|
padding-right: 0.25rem;
|
||||||
}
|
}
|
||||||
.md\:pb-5 {
|
.md\:pb-4 {
|
||||||
padding-bottom: 0.313rem;
|
padding-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
.md\:pl-5 {
|
.md\:pl-4 {
|
||||||
padding-left: 0.313rem;
|
padding-left: 0.25rem;
|
||||||
}
|
}
|
||||||
.md\:px-5 {
|
.md\:px-4 {
|
||||||
padding-left: 0.313rem;
|
padding-left: 0.25rem;
|
||||||
padding-right: 0.313rem;
|
padding-right: 0.25rem;
|
||||||
}
|
}
|
||||||
.md\:py-5 {
|
.md\:py-4 {
|
||||||
padding-top: 0.313rem;
|
padding-top: 0.25rem;
|
||||||
padding-bottom: 0.313rem;
|
padding-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
.md\:m-5 {
|
.md\:m-4 {
|
||||||
margin: 0.313rem;
|
margin: 0.25rem;
|
||||||
}
|
}
|
||||||
.md\:mt-5 {
|
.md\:mt-4 {
|
||||||
margin-top: 0.313rem;
|
margin-top: 0.25rem;
|
||||||
}
|
}
|
||||||
.md\:mr-5 {
|
.md\:mr-4 {
|
||||||
margin-right: 0.313rem;
|
margin-right: 0.25rem;
|
||||||
}
|
}
|
||||||
.md\:mb-5 {
|
.md\:mb-4 {
|
||||||
margin-bottom: 0.313rem;
|
margin-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
.md\:ml-5 {
|
.md\:ml-4 {
|
||||||
margin-left: 0.313rem;
|
margin-left: 0.25rem;
|
||||||
}
|
}
|
||||||
.md\:mx-5 {
|
.md\:mx-4 {
|
||||||
margin-left: 0.313rem;
|
margin-left: 0.25rem;
|
||||||
margin-right: 0.313rem;
|
margin-right: 0.25rem;
|
||||||
}
|
}
|
||||||
.md\:my-5 {
|
.md\:my-4 {
|
||||||
margin-top: 0.313rem;
|
margin-top: 0.25rem;
|
||||||
margin-bottom: 0.313rem;
|
margin-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1400px) {
|
@media (min-width: 1400px) {
|
||||||
.lg\:p-5 {
|
.lg\:p-4 {
|
||||||
padding: 0.313rem;
|
padding: 0.25rem;
|
||||||
}
|
}
|
||||||
.lg\:pt-5 {
|
.lg\:pt-4 {
|
||||||
padding-top: 0.313rem;
|
padding-top: 0.25rem;
|
||||||
}
|
}
|
||||||
.lg\:pr-5 {
|
.lg\:pr-4 {
|
||||||
padding-right: 0.313rem;
|
padding-right: 0.25rem;
|
||||||
}
|
}
|
||||||
.lg\:pb-5 {
|
.lg\:pb-4 {
|
||||||
padding-bottom: 0.313rem;
|
padding-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
.lg\:pl-5 {
|
.lg\:pl-4 {
|
||||||
padding-left: 0.313rem;
|
padding-left: 0.25rem;
|
||||||
}
|
}
|
||||||
.lg\:px-5 {
|
.lg\:px-4 {
|
||||||
padding-left: 0.313rem;
|
padding-left: 0.25rem;
|
||||||
padding-right: 0.313rem;
|
padding-right: 0.25rem;
|
||||||
}
|
}
|
||||||
.lg\:py-5 {
|
.lg\:py-4 {
|
||||||
padding-top: 0.313rem;
|
padding-top: 0.25rem;
|
||||||
padding-bottom: 0.313rem;
|
padding-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
.lg\:m-5 {
|
.lg\:m-4 {
|
||||||
margin: 0.313rem;
|
margin: 0.25rem;
|
||||||
}
|
}
|
||||||
.lg\:mt-5 {
|
.lg\:mt-4 {
|
||||||
margin-top: 0.313rem;
|
margin-top: 0.25rem;
|
||||||
}
|
}
|
||||||
.lg\:mr-5 {
|
.lg\:mr-4 {
|
||||||
margin-right: 0.313rem;
|
margin-right: 0.25rem;
|
||||||
}
|
}
|
||||||
.lg\:mb-5 {
|
.lg\:mb-4 {
|
||||||
margin-bottom: 0.313rem;
|
margin-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
.lg\:ml-5 {
|
.lg\:ml-4 {
|
||||||
margin-left: 0.313rem;
|
margin-left: 0.25rem;
|
||||||
}
|
}
|
||||||
.lg\:mx-5 {
|
.lg\:mx-4 {
|
||||||
margin-left: 0.313rem;
|
margin-left: 0.25rem;
|
||||||
margin-right: 0.313rem;
|
margin-right: 0.25rem;
|
||||||
}
|
}
|
||||||
.lg\:my-5 {
|
.lg\:my-4 {
|
||||||
margin-top: 0.313rem;
|
margin-top: 0.25rem;
|
||||||
margin-bottom: 0.313rem;
|
margin-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -3197,210 +3404,210 @@ template {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-10 {
|
.p-12 {
|
||||||
padding: 0.625rem;
|
padding: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pt-10 {
|
.pt-12 {
|
||||||
padding-top: 0.625rem;
|
padding-top: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pr-10 {
|
.pr-12 {
|
||||||
padding-right: 0.625rem;
|
padding-right: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pb-10 {
|
.pb-12 {
|
||||||
padding-bottom: 0.625rem;
|
padding-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pl-10 {
|
.pl-12 {
|
||||||
padding-left: 0.625rem;
|
padding-left: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.px-10 {
|
.px-12 {
|
||||||
padding-left: 0.625rem;
|
padding-left: 0.75rem;
|
||||||
padding-right: 0.625rem;
|
padding-right: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.py-10 {
|
.py-12 {
|
||||||
padding-top: 0.625rem;
|
padding-top: 0.75rem;
|
||||||
padding-bottom: 0.625rem;
|
padding-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.m-10 {
|
.m-12 {
|
||||||
margin: 0.625rem;
|
margin: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mt-10 {
|
.mt-12 {
|
||||||
margin-top: 0.625rem;
|
margin-top: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mr-10 {
|
.mr-12 {
|
||||||
margin-right: 0.625rem;
|
margin-right: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mb-10 {
|
.mb-12 {
|
||||||
margin-bottom: 0.625rem;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ml-10 {
|
.ml-12 {
|
||||||
margin-left: 0.625rem;
|
margin-left: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx-10 {
|
.mx-12 {
|
||||||
margin-left: 0.625rem;
|
margin-left: 0.75rem;
|
||||||
margin-right: 0.625rem;
|
margin-right: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.my-10 {
|
.my-12 {
|
||||||
margin-top: 0.625rem;
|
margin-top: 0.75rem;
|
||||||
margin-bottom: 0.625rem;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 576px) {
|
@media (min-width: 576px) {
|
||||||
.sm\:p-10 {
|
.sm\:p-12 {
|
||||||
padding: 0.625rem;
|
padding: 0.75rem;
|
||||||
}
|
}
|
||||||
.sm\:pt-10 {
|
.sm\:pt-12 {
|
||||||
padding-top: 0.625rem;
|
padding-top: 0.75rem;
|
||||||
}
|
}
|
||||||
.sm\:pr-10 {
|
.sm\:pr-12 {
|
||||||
padding-right: 0.625rem;
|
padding-right: 0.75rem;
|
||||||
}
|
}
|
||||||
.sm\:pb-10 {
|
.sm\:pb-12 {
|
||||||
padding-bottom: 0.625rem;
|
padding-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
.sm\:pl-10 {
|
.sm\:pl-12 {
|
||||||
padding-left: 0.625rem;
|
padding-left: 0.75rem;
|
||||||
}
|
}
|
||||||
.sm\:px-10 {
|
.sm\:px-12 {
|
||||||
padding-left: 0.625rem;
|
padding-left: 0.75rem;
|
||||||
padding-right: 0.625rem;
|
padding-right: 0.75rem;
|
||||||
}
|
}
|
||||||
.sm\:py-10 {
|
.sm\:py-12 {
|
||||||
padding-top: 0.625rem;
|
padding-top: 0.75rem;
|
||||||
padding-bottom: 0.625rem;
|
padding-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
.sm\:m-10 {
|
.sm\:m-12 {
|
||||||
margin: 0.625rem;
|
margin: 0.75rem;
|
||||||
}
|
}
|
||||||
.sm\:mt-10 {
|
.sm\:mt-12 {
|
||||||
margin-top: 0.625rem;
|
margin-top: 0.75rem;
|
||||||
}
|
}
|
||||||
.sm\:mr-10 {
|
.sm\:mr-12 {
|
||||||
margin-right: 0.625rem;
|
margin-right: 0.75rem;
|
||||||
}
|
}
|
||||||
.sm\:mb-10 {
|
.sm\:mb-12 {
|
||||||
margin-bottom: 0.625rem;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
.sm\:ml-10 {
|
.sm\:ml-12 {
|
||||||
margin-left: 0.625rem;
|
margin-left: 0.75rem;
|
||||||
}
|
}
|
||||||
.sm\:mx-10 {
|
.sm\:mx-12 {
|
||||||
margin-left: 0.625rem;
|
margin-left: 0.75rem;
|
||||||
margin-right: 0.625rem;
|
margin-right: 0.75rem;
|
||||||
}
|
}
|
||||||
.sm\:my-10 {
|
.sm\:my-12 {
|
||||||
margin-top: 0.625rem;
|
margin-top: 0.75rem;
|
||||||
margin-bottom: 0.625rem;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 992px) {
|
@media (min-width: 992px) {
|
||||||
.md\:p-10 {
|
.md\:p-12 {
|
||||||
padding: 0.625rem;
|
padding: 0.75rem;
|
||||||
}
|
}
|
||||||
.md\:pt-10 {
|
.md\:pt-12 {
|
||||||
padding-top: 0.625rem;
|
padding-top: 0.75rem;
|
||||||
}
|
}
|
||||||
.md\:pr-10 {
|
.md\:pr-12 {
|
||||||
padding-right: 0.625rem;
|
padding-right: 0.75rem;
|
||||||
}
|
}
|
||||||
.md\:pb-10 {
|
.md\:pb-12 {
|
||||||
padding-bottom: 0.625rem;
|
padding-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
.md\:pl-10 {
|
.md\:pl-12 {
|
||||||
padding-left: 0.625rem;
|
padding-left: 0.75rem;
|
||||||
}
|
}
|
||||||
.md\:px-10 {
|
.md\:px-12 {
|
||||||
padding-left: 0.625rem;
|
padding-left: 0.75rem;
|
||||||
padding-right: 0.625rem;
|
padding-right: 0.75rem;
|
||||||
}
|
}
|
||||||
.md\:py-10 {
|
.md\:py-12 {
|
||||||
padding-top: 0.625rem;
|
padding-top: 0.75rem;
|
||||||
padding-bottom: 0.625rem;
|
padding-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
.md\:m-10 {
|
.md\:m-12 {
|
||||||
margin: 0.625rem;
|
margin: 0.75rem;
|
||||||
}
|
}
|
||||||
.md\:mt-10 {
|
.md\:mt-12 {
|
||||||
margin-top: 0.625rem;
|
margin-top: 0.75rem;
|
||||||
}
|
}
|
||||||
.md\:mr-10 {
|
.md\:mr-12 {
|
||||||
margin-right: 0.625rem;
|
margin-right: 0.75rem;
|
||||||
}
|
}
|
||||||
.md\:mb-10 {
|
.md\:mb-12 {
|
||||||
margin-bottom: 0.625rem;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
.md\:ml-10 {
|
.md\:ml-12 {
|
||||||
margin-left: 0.625rem;
|
margin-left: 0.75rem;
|
||||||
}
|
}
|
||||||
.md\:mx-10 {
|
.md\:mx-12 {
|
||||||
margin-left: 0.625rem;
|
margin-left: 0.75rem;
|
||||||
margin-right: 0.625rem;
|
margin-right: 0.75rem;
|
||||||
}
|
}
|
||||||
.md\:my-10 {
|
.md\:my-12 {
|
||||||
margin-top: 0.625rem;
|
margin-top: 0.75rem;
|
||||||
margin-bottom: 0.625rem;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1400px) {
|
@media (min-width: 1400px) {
|
||||||
.lg\:p-10 {
|
.lg\:p-12 {
|
||||||
padding: 0.625rem;
|
padding: 0.75rem;
|
||||||
}
|
}
|
||||||
.lg\:pt-10 {
|
.lg\:pt-12 {
|
||||||
padding-top: 0.625rem;
|
padding-top: 0.75rem;
|
||||||
}
|
}
|
||||||
.lg\:pr-10 {
|
.lg\:pr-12 {
|
||||||
padding-right: 0.625rem;
|
padding-right: 0.75rem;
|
||||||
}
|
}
|
||||||
.lg\:pb-10 {
|
.lg\:pb-12 {
|
||||||
padding-bottom: 0.625rem;
|
padding-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
.lg\:pl-10 {
|
.lg\:pl-12 {
|
||||||
padding-left: 0.625rem;
|
padding-left: 0.75rem;
|
||||||
}
|
}
|
||||||
.lg\:px-10 {
|
.lg\:px-12 {
|
||||||
padding-left: 0.625rem;
|
padding-left: 0.75rem;
|
||||||
padding-right: 0.625rem;
|
padding-right: 0.75rem;
|
||||||
}
|
}
|
||||||
.lg\:py-10 {
|
.lg\:py-12 {
|
||||||
padding-top: 0.625rem;
|
padding-top: 0.75rem;
|
||||||
padding-bottom: 0.625rem;
|
padding-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
.lg\:m-10 {
|
.lg\:m-12 {
|
||||||
margin: 0.625rem;
|
margin: 0.75rem;
|
||||||
}
|
}
|
||||||
.lg\:mt-10 {
|
.lg\:mt-12 {
|
||||||
margin-top: 0.625rem;
|
margin-top: 0.75rem;
|
||||||
}
|
}
|
||||||
.lg\:mr-10 {
|
.lg\:mr-12 {
|
||||||
margin-right: 0.625rem;
|
margin-right: 0.75rem;
|
||||||
}
|
}
|
||||||
.lg\:mb-10 {
|
.lg\:mb-12 {
|
||||||
margin-bottom: 0.625rem;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
.lg\:ml-10 {
|
.lg\:ml-12 {
|
||||||
margin-left: 0.625rem;
|
margin-left: 0.75rem;
|
||||||
}
|
}
|
||||||
.lg\:mx-10 {
|
.lg\:mx-12 {
|
||||||
margin-left: 0.625rem;
|
margin-left: 0.75rem;
|
||||||
margin-right: 0.625rem;
|
margin-right: 0.75rem;
|
||||||
}
|
}
|
||||||
.lg\:my-10 {
|
.lg\:my-12 {
|
||||||
margin-top: 0.625rem;
|
margin-top: 0.75rem;
|
||||||
margin-bottom: 0.625rem;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "knacss",
|
"name": "knacss",
|
||||||
"version": "8.1",
|
"version": "8.2",
|
||||||
"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)",
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,8 @@
|
||||||
// ----------------
|
// ----------------
|
||||||
|
|
||||||
// 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: (sm: 576px,
|
$breakpoints: (
|
||||||
|
sm: 576px,
|
||||||
md: 992px,
|
md: 992px,
|
||||||
lg: 1400px,
|
lg: 1400px,
|
||||||
) !default;
|
) !default;
|
||||||
|
|
@ -20,36 +21,31 @@ $large: map-get($breakpoints, lg) !default;
|
||||||
// Spacers
|
// Spacers
|
||||||
// ----------------
|
// ----------------
|
||||||
|
|
||||||
$spacers: ("0": 0,
|
$spacer: 1rem;
|
||||||
// none
|
$spacers: (
|
||||||
"2": 0.125rem,
|
"0": 0, // none
|
||||||
// tiny
|
"1": 1px, // mono
|
||||||
"5": 0.313rem,
|
"2": 0.125rem, // nano
|
||||||
// tiny-plus
|
"4": 0.25rem, // micro
|
||||||
"8": 0.5rem,
|
"8": 0.5rem, // mini
|
||||||
// small
|
"12": 0.75rem, // small
|
||||||
"10": 0.625rem,
|
"16": 1rem, // medium
|
||||||
// small-plus
|
"20": 1.25rem, // large
|
||||||
"16": 1rem,
|
"24": 1.5rem, // wide
|
||||||
// medium
|
"36": 2.25rem, // ultra
|
||||||
"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") !default;
|
$spacer-none: map-get($spacers, "0");
|
||||||
$spacer-tiny: map-get($spacers, "2") !default;
|
$spacer-mono: map-get($spacers, "1");
|
||||||
$spacer-tiny-plus: map-get($spacers, "5") !default;
|
$spacer-nano: map-get($spacers, "2");
|
||||||
$spacer-small: map-get($spacers, "8") !default;
|
$spacer-micro: map-get($spacers, "4");
|
||||||
$spacer-small-plus: map-get($spacers, "10") !default;
|
$spacer-mini: map-get($spacers, "8");
|
||||||
$spacer-medium: map-get($spacers, "16") !default;
|
$spacer-small: map-get($spacers, "12");
|
||||||
$spacer-medium-plus: map-get($spacers, "20") !default;
|
$spacer-medium: map-get($spacers, "16");
|
||||||
$spacer-large: map-get($spacers, "24") !default;
|
$spacer-large: map-get($spacers, "20");
|
||||||
$spacer-large-plus: map-get($spacers, "36") !default;
|
$spacer-wide: map-get($spacers, "24");
|
||||||
|
$spacer-ultra: map-get($spacers, "36");
|
||||||
|
|
||||||
// ----------------
|
// ----------------
|
||||||
// Grid layout
|
// Grid layout
|
||||||
|
|
@ -57,7 +53,8 @@ $spacer-large-plus: map-get($spacers, "36") !default;
|
||||||
|
|
||||||
$grid-columns: 6 !default;
|
$grid-columns: 6 !default;
|
||||||
|
|
||||||
$gaps: ("0": 0,
|
$gaps: (
|
||||||
|
"0": 0,
|
||||||
"5": 0.313rem,
|
"5": 0.313rem,
|
||||||
"10": 0.625rem,
|
"10": 0.625rem,
|
||||||
"16": 1rem,
|
"16": 1rem,
|
||||||
|
|
@ -70,24 +67,14 @@ $gaps: ("0": 0,
|
||||||
// ----------------
|
// ----------------
|
||||||
|
|
||||||
// Familles de fonts
|
// Familles de fonts
|
||||||
$font-family-base: system-ui,
|
$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";
|
||||||
-apple-system,
|
$font-family-headings: $font-family-base;
|
||||||
BlinkMacSystemFont,
|
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||||
"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: ("10": 0.625rem,
|
$font-size: (
|
||||||
|
"10": 0.625rem,
|
||||||
"11": 0.6875rem,
|
"11": 0.6875rem,
|
||||||
"12": 0.75rem,
|
"12": 0.75rem,
|
||||||
"14": 0.875rem,
|
"14": 0.875rem,
|
||||||
|
|
@ -145,25 +132,25 @@ $on-secondary: $white; // Contenus affichés par-dessus une couche $secondary
|
||||||
|
|
||||||
// Variables couleurs statuts
|
// Variables couleurs statuts
|
||||||
|
|
||||||
$success: #dff0d9;
|
$success-bg: #dff0d9;
|
||||||
$success-border: #d6e9c6;
|
$success-border: #d6e9c6;
|
||||||
$on-success: #28a745; // contenu sur couche success
|
$success: #3c763d;
|
||||||
$on-success-accent: #4d9c4d; // lien sur couche success
|
$success-hover: #275c28;
|
||||||
|
|
||||||
$info: #d9edf7;
|
$info-bg: #d9edf7;
|
||||||
$info-border: #bce8f1;
|
$info-border: #bce8f1;
|
||||||
$on-info: #17a2b8;
|
$info: #0d7192;
|
||||||
$on-info-accent: #4fa8c4;
|
$info-hover: #005e7d;
|
||||||
|
|
||||||
$warning: #fcf8e3;
|
$warning-bg: #fcf8e3;
|
||||||
$warning-border: #faebcc;
|
$warning-border: #faebcc;
|
||||||
$on-warning: #ffc107;
|
$warning: #8a6d3b;
|
||||||
$on-warning-accent: #d19644;
|
$warning-hover: #654f29;
|
||||||
|
|
||||||
$error: #fff2f2;
|
$error-bg: #fff2f2;
|
||||||
$error-border: #ebccd1;
|
$error-border: #ebccd1;
|
||||||
$on-error: #d9534f;
|
$error: #e3224a;
|
||||||
$on-error-accent: #be4945;
|
$error-hover: #a00d10;
|
||||||
|
|
||||||
|
|
||||||
// Links
|
// Links
|
||||||
|
|
@ -174,7 +161,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: 2rem;
|
$radius-large: 20rem;
|
||||||
$radius-circle: 50%;
|
$radius-circle: 50%;
|
||||||
|
|
||||||
// ----------------
|
// ----------------
|
||||||
|
|
|
||||||
|
|
@ -112,7 +112,7 @@ fieldset {
|
||||||
legend {
|
legend {
|
||||||
display: table;
|
display: table;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 0 $spacer-tiny;
|
padding: 0 $spacer-micro;
|
||||||
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-small-plus;
|
padding: $spacer-small $spacer-medium;
|
||||||
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-tiny-plus $spacer-small;
|
padding: $spacer-micro-plus $spacer-small;
|
||||||
font-size: .8em;
|
font-size: .8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
&--big {
|
&--big {
|
||||||
padding: $spacer-small-plus $spacer-medium;
|
padding: $spacer-medium $spacer-medium;
|
||||||
font-size: 1.4em;
|
font-size: 1.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
/*!
|
/*!
|
||||||
* KNACSS Reborn: Just keep it simple!
|
* KNACSS Reborn: Just keep it simple!
|
||||||
* @author: Alsacreations
|
* @author: Alsacreations
|
||||||
* v8.1 2022/01
|
* v8.2 2022/01
|
||||||
* Licence WTFPL http://www.wtfpl.net/
|
* Licence WTFPL http://www.wtfpl.net/
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue