refonte des variables d'espacement
This commit is contained in:
Raphaël Goetter
parent
59f02b6c57
commit
d9833fe12c
|
|
@ -1,5 +1,6 @@
|
|||
# Changelog
|
||||
|
||||
- 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
|
||||
|
|
@ -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
|
||||
- renommage des variables couleur de projets
|
||||
- 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
|
||||
- suppression du namespace "kna-"
|
||||
- refonte :
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
/*!
|
||||
* KNACSS Reborn: Just keep it simple!
|
||||
* @author: Alsacreations
|
||||
* v8.1 2022/01
|
||||
* v8.2 2022/01
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
/* ----------------------------- */
|
||||
|
|
@ -38,7 +38,7 @@ html {
|
|||
|
||||
body {
|
||||
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;
|
||||
line-height: 1.5;
|
||||
background-color: #FFFFFF;
|
||||
|
|
@ -121,7 +121,7 @@ h6,
|
|||
dt,
|
||||
dd {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -422,7 +422,7 @@ fieldset {
|
|||
legend {
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
padding: 0 0.125rem;
|
||||
padding: 0 0.25rem;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
white-space: normal;
|
||||
|
|
@ -623,19 +623,19 @@ template {
|
|||
|
||||
@media (min-width: 576px) {
|
||||
.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) {
|
||||
.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) {
|
||||
.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 {
|
||||
padding: 0.125rem;
|
||||
}
|
||||
|
|
@ -2783,210 +2990,210 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
.p-5 {
|
||||
padding: 0.313rem;
|
||||
.p-4 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.pt-5 {
|
||||
padding-top: 0.313rem;
|
||||
.pt-4 {
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
|
||||
.pr-5 {
|
||||
padding-right: 0.313rem;
|
||||
.pr-4 {
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
.pb-5 {
|
||||
padding-bottom: 0.313rem;
|
||||
.pb-4 {
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.pl-5 {
|
||||
padding-left: 0.313rem;
|
||||
.pl-4 {
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
|
||||
.px-5 {
|
||||
padding-left: 0.313rem;
|
||||
padding-right: 0.313rem;
|
||||
.px-4 {
|
||||
padding-left: 0.25rem;
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
.py-5 {
|
||||
padding-top: 0.313rem;
|
||||
padding-bottom: 0.313rem;
|
||||
.py-4 {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.m-5 {
|
||||
margin: 0.313rem;
|
||||
.m-4 {
|
||||
margin: 0.25rem;
|
||||
}
|
||||
|
||||
.mt-5 {
|
||||
margin-top: 0.313rem;
|
||||
.mt-4 {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.mr-5 {
|
||||
margin-right: 0.313rem;
|
||||
.mr-4 {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.mb-5 {
|
||||
margin-bottom: 0.313rem;
|
||||
.mb-4 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.ml-5 {
|
||||
margin-left: 0.313rem;
|
||||
.ml-4 {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.mx-5 {
|
||||
margin-left: 0.313rem;
|
||||
margin-right: 0.313rem;
|
||||
.mx-4 {
|
||||
margin-left: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.my-5 {
|
||||
margin-top: 0.313rem;
|
||||
margin-bottom: 0.313rem;
|
||||
.my-4 {
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:p-5 {
|
||||
padding: 0.313rem;
|
||||
.sm\:p-4 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
.sm\:pt-5 {
|
||||
padding-top: 0.313rem;
|
||||
.sm\:pt-4 {
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
.sm\:pr-5 {
|
||||
padding-right: 0.313rem;
|
||||
.sm\:pr-4 {
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
.sm\:pb-5 {
|
||||
padding-bottom: 0.313rem;
|
||||
.sm\:pb-4 {
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
.sm\:pl-5 {
|
||||
padding-left: 0.313rem;
|
||||
.sm\:pl-4 {
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
.sm\:px-5 {
|
||||
padding-left: 0.313rem;
|
||||
padding-right: 0.313rem;
|
||||
.sm\:px-4 {
|
||||
padding-left: 0.25rem;
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
.sm\:py-5 {
|
||||
padding-top: 0.313rem;
|
||||
padding-bottom: 0.313rem;
|
||||
.sm\:py-4 {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
.sm\:m-5 {
|
||||
margin: 0.313rem;
|
||||
.sm\:m-4 {
|
||||
margin: 0.25rem;
|
||||
}
|
||||
.sm\:mt-5 {
|
||||
margin-top: 0.313rem;
|
||||
.sm\:mt-4 {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.sm\:mr-5 {
|
||||
margin-right: 0.313rem;
|
||||
.sm\:mr-4 {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
.sm\:mb-5 {
|
||||
margin-bottom: 0.313rem;
|
||||
.sm\:mb-4 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.sm\:ml-5 {
|
||||
margin-left: 0.313rem;
|
||||
.sm\:ml-4 {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
.sm\:mx-5 {
|
||||
margin-left: 0.313rem;
|
||||
margin-right: 0.313rem;
|
||||
.sm\:mx-4 {
|
||||
margin-left: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
.sm\:my-5 {
|
||||
margin-top: 0.313rem;
|
||||
margin-bottom: 0.313rem;
|
||||
.sm\:my-4 {
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.md\:p-5 {
|
||||
padding: 0.313rem;
|
||||
.md\:p-4 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
.md\:pt-5 {
|
||||
padding-top: 0.313rem;
|
||||
.md\:pt-4 {
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
.md\:pr-5 {
|
||||
padding-right: 0.313rem;
|
||||
.md\:pr-4 {
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
.md\:pb-5 {
|
||||
padding-bottom: 0.313rem;
|
||||
.md\:pb-4 {
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
.md\:pl-5 {
|
||||
padding-left: 0.313rem;
|
||||
.md\:pl-4 {
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
.md\:px-5 {
|
||||
padding-left: 0.313rem;
|
||||
padding-right: 0.313rem;
|
||||
.md\:px-4 {
|
||||
padding-left: 0.25rem;
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
.md\:py-5 {
|
||||
padding-top: 0.313rem;
|
||||
padding-bottom: 0.313rem;
|
||||
.md\:py-4 {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
.md\:m-5 {
|
||||
margin: 0.313rem;
|
||||
.md\:m-4 {
|
||||
margin: 0.25rem;
|
||||
}
|
||||
.md\:mt-5 {
|
||||
margin-top: 0.313rem;
|
||||
.md\:mt-4 {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.md\:mr-5 {
|
||||
margin-right: 0.313rem;
|
||||
.md\:mr-4 {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
.md\:mb-5 {
|
||||
margin-bottom: 0.313rem;
|
||||
.md\:mb-4 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.md\:ml-5 {
|
||||
margin-left: 0.313rem;
|
||||
.md\:ml-4 {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
.md\:mx-5 {
|
||||
margin-left: 0.313rem;
|
||||
margin-right: 0.313rem;
|
||||
.md\:mx-4 {
|
||||
margin-left: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
.md\:my-5 {
|
||||
margin-top: 0.313rem;
|
||||
margin-bottom: 0.313rem;
|
||||
.md\:my-4 {
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:p-5 {
|
||||
padding: 0.313rem;
|
||||
.lg\:p-4 {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
.lg\:pt-5 {
|
||||
padding-top: 0.313rem;
|
||||
.lg\:pt-4 {
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
.lg\:pr-5 {
|
||||
padding-right: 0.313rem;
|
||||
.lg\:pr-4 {
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
.lg\:pb-5 {
|
||||
padding-bottom: 0.313rem;
|
||||
.lg\:pb-4 {
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
.lg\:pl-5 {
|
||||
padding-left: 0.313rem;
|
||||
.lg\:pl-4 {
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
.lg\:px-5 {
|
||||
padding-left: 0.313rem;
|
||||
padding-right: 0.313rem;
|
||||
.lg\:px-4 {
|
||||
padding-left: 0.25rem;
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
.lg\:py-5 {
|
||||
padding-top: 0.313rem;
|
||||
padding-bottom: 0.313rem;
|
||||
.lg\:py-4 {
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
.lg\:m-5 {
|
||||
margin: 0.313rem;
|
||||
.lg\:m-4 {
|
||||
margin: 0.25rem;
|
||||
}
|
||||
.lg\:mt-5 {
|
||||
margin-top: 0.313rem;
|
||||
.lg\:mt-4 {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
.lg\:mr-5 {
|
||||
margin-right: 0.313rem;
|
||||
.lg\:mr-4 {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
.lg\:mb-5 {
|
||||
margin-bottom: 0.313rem;
|
||||
.lg\:mb-4 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.lg\:ml-5 {
|
||||
margin-left: 0.313rem;
|
||||
.lg\:ml-4 {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
.lg\:mx-5 {
|
||||
margin-left: 0.313rem;
|
||||
margin-right: 0.313rem;
|
||||
.lg\:mx-4 {
|
||||
margin-left: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
.lg\:my-5 {
|
||||
margin-top: 0.313rem;
|
||||
margin-bottom: 0.313rem;
|
||||
.lg\:my-4 {
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -3197,210 +3404,210 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
.p-10 {
|
||||
padding: 0.625rem;
|
||||
.p-12 {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.pt-10 {
|
||||
padding-top: 0.625rem;
|
||||
.pt-12 {
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
|
||||
.pr-10 {
|
||||
padding-right: 0.625rem;
|
||||
.pr-12 {
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.pb-10 {
|
||||
padding-bottom: 0.625rem;
|
||||
.pb-12 {
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.pl-10 {
|
||||
padding-left: 0.625rem;
|
||||
.pl-12 {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
.px-10 {
|
||||
padding-left: 0.625rem;
|
||||
padding-right: 0.625rem;
|
||||
.px-12 {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.py-10 {
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
.py-12 {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.m-10 {
|
||||
margin: 0.625rem;
|
||||
.m-12 {
|
||||
margin: 0.75rem;
|
||||
}
|
||||
|
||||
.mt-10 {
|
||||
margin-top: 0.625rem;
|
||||
.mt-12 {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.mr-10 {
|
||||
margin-right: 0.625rem;
|
||||
.mr-12 {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.mb-10 {
|
||||
margin-bottom: 0.625rem;
|
||||
.mb-12 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.ml-10 {
|
||||
margin-left: 0.625rem;
|
||||
.ml-12 {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.mx-10 {
|
||||
margin-left: 0.625rem;
|
||||
margin-right: 0.625rem;
|
||||
.mx-12 {
|
||||
margin-left: 0.75rem;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.my-10 {
|
||||
margin-top: 0.625rem;
|
||||
margin-bottom: 0.625rem;
|
||||
.my-12 {
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:p-10 {
|
||||
padding: 0.625rem;
|
||||
.sm\:p-12 {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
.sm\:pt-10 {
|
||||
padding-top: 0.625rem;
|
||||
.sm\:pt-12 {
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
.sm\:pr-10 {
|
||||
padding-right: 0.625rem;
|
||||
.sm\:pr-12 {
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
.sm\:pb-10 {
|
||||
padding-bottom: 0.625rem;
|
||||
.sm\:pb-12 {
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
.sm\:pl-10 {
|
||||
padding-left: 0.625rem;
|
||||
.sm\:pl-12 {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
.sm\:px-10 {
|
||||
padding-left: 0.625rem;
|
||||
padding-right: 0.625rem;
|
||||
.sm\:px-12 {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
.sm\:py-10 {
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
.sm\:py-12 {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
.sm\:m-10 {
|
||||
margin: 0.625rem;
|
||||
.sm\:m-12 {
|
||||
margin: 0.75rem;
|
||||
}
|
||||
.sm\:mt-10 {
|
||||
margin-top: 0.625rem;
|
||||
.sm\:mt-12 {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
.sm\:mr-10 {
|
||||
margin-right: 0.625rem;
|
||||
.sm\:mr-12 {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
.sm\:mb-10 {
|
||||
margin-bottom: 0.625rem;
|
||||
.sm\:mb-12 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.sm\:ml-10 {
|
||||
margin-left: 0.625rem;
|
||||
.sm\:ml-12 {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
.sm\:mx-10 {
|
||||
margin-left: 0.625rem;
|
||||
margin-right: 0.625rem;
|
||||
.sm\:mx-12 {
|
||||
margin-left: 0.75rem;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
.sm\:my-10 {
|
||||
margin-top: 0.625rem;
|
||||
margin-bottom: 0.625rem;
|
||||
.sm\:my-12 {
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.md\:p-10 {
|
||||
padding: 0.625rem;
|
||||
.md\:p-12 {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
.md\:pt-10 {
|
||||
padding-top: 0.625rem;
|
||||
.md\:pt-12 {
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
.md\:pr-10 {
|
||||
padding-right: 0.625rem;
|
||||
.md\:pr-12 {
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
.md\:pb-10 {
|
||||
padding-bottom: 0.625rem;
|
||||
.md\:pb-12 {
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
.md\:pl-10 {
|
||||
padding-left: 0.625rem;
|
||||
.md\:pl-12 {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
.md\:px-10 {
|
||||
padding-left: 0.625rem;
|
||||
padding-right: 0.625rem;
|
||||
.md\:px-12 {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
.md\:py-10 {
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
.md\:py-12 {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
.md\:m-10 {
|
||||
margin: 0.625rem;
|
||||
.md\:m-12 {
|
||||
margin: 0.75rem;
|
||||
}
|
||||
.md\:mt-10 {
|
||||
margin-top: 0.625rem;
|
||||
.md\:mt-12 {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
.md\:mr-10 {
|
||||
margin-right: 0.625rem;
|
||||
.md\:mr-12 {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
.md\:mb-10 {
|
||||
margin-bottom: 0.625rem;
|
||||
.md\:mb-12 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.md\:ml-10 {
|
||||
margin-left: 0.625rem;
|
||||
.md\:ml-12 {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
.md\:mx-10 {
|
||||
margin-left: 0.625rem;
|
||||
margin-right: 0.625rem;
|
||||
.md\:mx-12 {
|
||||
margin-left: 0.75rem;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
.md\:my-10 {
|
||||
margin-top: 0.625rem;
|
||||
margin-bottom: 0.625rem;
|
||||
.md\:my-12 {
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:p-10 {
|
||||
padding: 0.625rem;
|
||||
.lg\:p-12 {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
.lg\:pt-10 {
|
||||
padding-top: 0.625rem;
|
||||
.lg\:pt-12 {
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
.lg\:pr-10 {
|
||||
padding-right: 0.625rem;
|
||||
.lg\:pr-12 {
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
.lg\:pb-10 {
|
||||
padding-bottom: 0.625rem;
|
||||
.lg\:pb-12 {
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
.lg\:pl-10 {
|
||||
padding-left: 0.625rem;
|
||||
.lg\:pl-12 {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
.lg\:px-10 {
|
||||
padding-left: 0.625rem;
|
||||
padding-right: 0.625rem;
|
||||
.lg\:px-12 {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
.lg\:py-10 {
|
||||
padding-top: 0.625rem;
|
||||
padding-bottom: 0.625rem;
|
||||
.lg\:py-12 {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
.lg\:m-10 {
|
||||
margin: 0.625rem;
|
||||
.lg\:m-12 {
|
||||
margin: 0.75rem;
|
||||
}
|
||||
.lg\:mt-10 {
|
||||
margin-top: 0.625rem;
|
||||
.lg\:mt-12 {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
.lg\:mr-10 {
|
||||
margin-right: 0.625rem;
|
||||
.lg\:mr-12 {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
.lg\:mb-10 {
|
||||
margin-bottom: 0.625rem;
|
||||
.lg\:mb-12 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.lg\:ml-10 {
|
||||
margin-left: 0.625rem;
|
||||
.lg\:ml-12 {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
.lg\:mx-10 {
|
||||
margin-left: 0.625rem;
|
||||
margin-right: 0.625rem;
|
||||
.lg\:mx-12 {
|
||||
margin-left: 0.75rem;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
.lg\:my-10 {
|
||||
margin-top: 0.625rem;
|
||||
margin-bottom: 0.625rem;
|
||||
.lg\:my-12 {
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "knacss",
|
||||
"version": "8.1",
|
||||
"version": "8.2",
|
||||
"homepage": "http://www.knacss.com/",
|
||||
"bugs": "https://github.com/alsacreations/KNACSS/issues",
|
||||
"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
|
||||
$breakpoints: (sm: 576px,
|
||||
$breakpoints: (
|
||||
sm: 576px,
|
||||
md: 992px,
|
||||
lg: 1400px,
|
||||
) !default;
|
||||
|
|
@ -20,36 +21,31 @@ $large: map-get($breakpoints, lg) !default;
|
|||
// Spacers
|
||||
// ----------------
|
||||
|
||||
$spacers: ("0": 0,
|
||||
// none
|
||||
"2": 0.125rem,
|
||||
// tiny
|
||||
"5": 0.313rem,
|
||||
// tiny-plus
|
||||
"8": 0.5rem,
|
||||
// small
|
||||
"10": 0.625rem,
|
||||
// small-plus
|
||||
"16": 1rem,
|
||||
// medium
|
||||
"20": 1.25rem,
|
||||
// medium-plus
|
||||
"24": 1.5rem,
|
||||
// large
|
||||
"36": 2.25rem,
|
||||
// large-plus
|
||||
$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,
|
||||
) !default;
|
||||
);
|
||||
|
||||
$spacer-none: map-get($spacers, "0") !default;
|
||||
$spacer-tiny: map-get($spacers, "2") !default;
|
||||
$spacer-tiny-plus: map-get($spacers, "5") !default;
|
||||
$spacer-small: map-get($spacers, "8") !default;
|
||||
$spacer-small-plus: map-get($spacers, "10") !default;
|
||||
$spacer-medium: map-get($spacers, "16") !default;
|
||||
$spacer-medium-plus: map-get($spacers, "20") !default;
|
||||
$spacer-large: map-get($spacers, "24") !default;
|
||||
$spacer-large-plus: map-get($spacers, "36") !default;
|
||||
$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
|
||||
|
|
@ -57,7 +53,8 @@ $spacer-large-plus: map-get($spacers, "36") !default;
|
|||
|
||||
$grid-columns: 6 !default;
|
||||
|
||||
$gaps: ("0": 0,
|
||||
$gaps: (
|
||||
"0": 0,
|
||||
"5": 0.313rem,
|
||||
"10": 0.625rem,
|
||||
"16": 1rem,
|
||||
|
|
@ -70,24 +67,14 @@ $gaps: ("0": 0,
|
|||
// ----------------
|
||||
|
||||
// Familles de fonts
|
||||
$font-family-base: system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
Roboto,
|
||||
Oxygen-Sans,
|
||||
Ubuntu,
|
||||
Cantarell,
|
||||
"Helvetica Neue",
|
||||
sans-serif;
|
||||
$font-family-headings: sans-serif;
|
||||
$font-family-monospace: consolas,
|
||||
courier,
|
||||
monospace;
|
||||
$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,
|
||||
$font-size: (
|
||||
"10": 0.625rem,
|
||||
"11": 0.6875rem,
|
||||
"12": 0.75rem,
|
||||
"14": 0.875rem,
|
||||
|
|
@ -145,25 +132,25 @@ $on-secondary: $white; // Contenus affichés par-dessus une couche $secondary
|
|||
|
||||
// Variables couleurs statuts
|
||||
|
||||
$success: #dff0d9;
|
||||
$success-bg: #dff0d9;
|
||||
$success-border: #d6e9c6;
|
||||
$on-success: #28a745; // contenu sur couche success
|
||||
$on-success-accent: #4d9c4d; // lien sur couche success
|
||||
$success: #3c763d;
|
||||
$success-hover: #275c28;
|
||||
|
||||
$info: #d9edf7;
|
||||
$info-bg: #d9edf7;
|
||||
$info-border: #bce8f1;
|
||||
$on-info: #17a2b8;
|
||||
$on-info-accent: #4fa8c4;
|
||||
$info: #0d7192;
|
||||
$info-hover: #005e7d;
|
||||
|
||||
$warning: #fcf8e3;
|
||||
$warning-bg: #fcf8e3;
|
||||
$warning-border: #faebcc;
|
||||
$on-warning: #ffc107;
|
||||
$on-warning-accent: #d19644;
|
||||
$warning: #8a6d3b;
|
||||
$warning-hover: #654f29;
|
||||
|
||||
$error: #fff2f2;
|
||||
$error-bg: #fff2f2;
|
||||
$error-border: #ebccd1;
|
||||
$on-error: #d9534f;
|
||||
$on-error-accent: #be4945;
|
||||
$error: #e3224a;
|
||||
$error-hover: #a00d10;
|
||||
|
||||
|
||||
// Links
|
||||
|
|
@ -174,7 +161,7 @@ $link-decoration-hover: underline;
|
|||
$radius-none: 0;
|
||||
$radius-small: 0.5rem;
|
||||
$radius-medium: 1rem;
|
||||
$radius-large: 2rem;
|
||||
$radius-large: 20rem;
|
||||
$radius-circle: 50%;
|
||||
|
||||
// ----------------
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ fieldset {
|
|||
legend {
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
padding: 0 $spacer-tiny;
|
||||
padding: 0 $spacer-micro;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
white-space: normal;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: $spacer-small $spacer-small-plus;
|
||||
padding: $spacer-small $spacer-medium;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: 0.25s;
|
||||
|
|
@ -38,12 +38,12 @@
|
|||
.btn,
|
||||
.button {
|
||||
&--small {
|
||||
padding: $spacer-tiny-plus $spacer-small;
|
||||
padding: $spacer-micro-plus $spacer-small;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
&--big {
|
||||
padding: $spacer-small-plus $spacer-medium;
|
||||
padding: $spacer-medium $spacer-medium;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/*!
|
||||
* KNACSS Reborn: Just keep it simple!
|
||||
* @author: Alsacreations
|
||||
* v8.1 2022/01
|
||||
* v8.2 2022/01
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user