refonte des variables de couleurs
This commit is contained in:
Raphaël Goetter
parent
8e95e4cdd9
commit
59f02b6c57
10 changed files with 197 additions and 172 deletions
|
|
@ -8,8 +8,6 @@ KNACSS, c'est une sorte de feuille de style CSS "reset" sur-vitaminée qui perme
|
|||
|
||||
## Documentation version actuelle (v8 = Reborn)
|
||||
|
||||
**Important : la version actuelle (v8.0.x) de KNACSS est encore en période de tests afin de s'adapter aux besoins de l'agence Alsacréations. Elle est partagée au public mais est susceptible d'évoluer à tout moment. Le niveau de version v8.1 marquera la première étape de sa stabilisation.**
|
||||
|
||||
- Site web de présentation de KNACSS Reborn : <https://www.knacss.com/>
|
||||
- [**Documentation KNACSS Reborn**](https://www.knacss.com/doc.html)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
# Changelog
|
||||
|
||||
- 9 juillet 2021 ("8.0.5") : suppression min-height: 0 par défaut
|
||||
- 5 janvier 2022 (8.1) : refonte des variables de couleur
|
||||
- 9 juillet 2021 (8.0.5) : suppression min-height: 0 par défaut
|
||||
- 26 avril 2021 : taille de base 100% (et non plus 62.5%) et corrections Grillade
|
||||
- 5 mars 2021 : les classes utilitaires font à présent partie du Core
|
||||
- 26 novembre 2020 : Documentation + V1.0.0
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
/*!
|
||||
* KNACSS Reborn: Just keep it simple!
|
||||
* @author: Alsacreations
|
||||
* v8.0.4 2021/04
|
||||
* v8.1 2022/01
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
/* ----------------------------- */
|
||||
|
|
@ -41,7 +41,7 @@ body {
|
|||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
background-color: #ffffff;
|
||||
background-color: #FFFFFF;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
|
|
@ -67,7 +67,7 @@ h6,
|
|||
* Links
|
||||
*/
|
||||
a {
|
||||
color: #454d5d;
|
||||
color: #6c757d;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
|
@ -633,9 +633,9 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.layout-maxed {
|
||||
grid-template-columns: minmax(0.5rem, 1fr) minmax(auto, 1330px) minmax(0.5rem, 1fr);
|
||||
grid-template-columns: minmax(0.5rem, 1fr) minmax(auto, 1400px) minmax(0.5rem, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -921,7 +921,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -939,7 +939,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:block {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -957,7 +957,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:inline {
|
||||
display: inline;
|
||||
}
|
||||
|
|
@ -975,7 +975,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -993,7 +993,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -1011,7 +1011,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
|
@ -1029,7 +1029,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -1047,7 +1047,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
|
@ -1065,7 +1065,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:flex-no-wrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
|
@ -1083,7 +1083,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:flex-shrink {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
|
@ -1101,7 +1101,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:flex-no-shrink {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
|
@ -1119,7 +1119,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
|
@ -1137,7 +1137,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:flex-no-grow {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
|
@ -1155,7 +1155,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:float-left {
|
||||
float: left;
|
||||
}
|
||||
|
|
@ -1173,7 +1173,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:float-right {
|
||||
float: right;
|
||||
}
|
||||
|
|
@ -1191,7 +1191,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:float-none {
|
||||
float: none;
|
||||
}
|
||||
|
|
@ -1209,7 +1209,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:text-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -1227,7 +1227,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:text-italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
@ -1245,7 +1245,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:text-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
@ -1263,7 +1263,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:text-lowercase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
|
@ -1281,7 +1281,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:text-smaller {
|
||||
font-size: smaller;
|
||||
}
|
||||
|
|
@ -1299,7 +1299,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:text-bigger {
|
||||
font-size: bigger;
|
||||
}
|
||||
|
|
@ -1317,7 +1317,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -1335,7 +1335,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1353,7 +1353,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
|
@ -1371,7 +1371,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:text-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
|
|
@ -1389,7 +1389,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:text-wrap {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
|
@ -1407,7 +1407,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
|
@ -1425,7 +1425,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
|
@ -1443,7 +1443,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -1461,7 +1461,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
|
@ -1479,7 +1479,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:justify-around {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
|
@ -1497,7 +1497,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:justify-evenly {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
|
@ -1515,7 +1515,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:justify-items-start {
|
||||
justify-items: start;
|
||||
}
|
||||
|
|
@ -1533,7 +1533,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:justify-items-end {
|
||||
justify-items: end;
|
||||
}
|
||||
|
|
@ -1551,7 +1551,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:justify-items-center {
|
||||
justify-items: center;
|
||||
}
|
||||
|
|
@ -1569,7 +1569,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:align-start {
|
||||
align-content: start;
|
||||
}
|
||||
|
|
@ -1587,7 +1587,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:align-end {
|
||||
align-content: end;
|
||||
}
|
||||
|
|
@ -1605,7 +1605,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:align-center {
|
||||
align-content: center;
|
||||
}
|
||||
|
|
@ -1623,7 +1623,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:align-between {
|
||||
align-content: space-between;
|
||||
}
|
||||
|
|
@ -1641,7 +1641,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:align-around {
|
||||
align-content: space-around;
|
||||
}
|
||||
|
|
@ -1659,7 +1659,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:align-evenly {
|
||||
align-content: space-evenly;
|
||||
}
|
||||
|
|
@ -1677,7 +1677,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:align-items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
|
@ -1695,7 +1695,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:align-items-end {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
|
@ -1713,7 +1713,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:align-items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -1731,7 +1731,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:place-center {
|
||||
place-content: center;
|
||||
}
|
||||
|
|
@ -1749,7 +1749,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:justify-self-auto {
|
||||
justify-self: auto;
|
||||
}
|
||||
|
|
@ -1767,7 +1767,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:justify-self-start {
|
||||
justify-self: start;
|
||||
}
|
||||
|
|
@ -1785,7 +1785,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:justify-self-end {
|
||||
justify-self: end;
|
||||
}
|
||||
|
|
@ -1803,7 +1803,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:justify-self-center {
|
||||
justify-self: center;
|
||||
}
|
||||
|
|
@ -1821,7 +1821,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:justify-self-stretch {
|
||||
justify-self: stretch;
|
||||
}
|
||||
|
|
@ -1839,7 +1839,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:align-self-auto {
|
||||
align-self: auto;
|
||||
}
|
||||
|
|
@ -1857,7 +1857,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:align-self-start {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
|
@ -1875,7 +1875,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:align-self-end {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
|
@ -1893,7 +1893,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:align-self-center {
|
||||
align-self: center;
|
||||
}
|
||||
|
|
@ -1911,7 +1911,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:align-self-stretch {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
|
@ -1929,7 +1929,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:align-top {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
|
@ -1947,7 +1947,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:align-bottom {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
|
@ -1965,7 +1965,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:align-middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -1983,7 +1983,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:item-first {
|
||||
order: -100;
|
||||
}
|
||||
|
|
@ -2001,7 +2001,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:item-last {
|
||||
order: 100;
|
||||
}
|
||||
|
|
@ -2077,7 +2077,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:visually-hidden {
|
||||
position: absolute !important;
|
||||
border: 0 !important;
|
||||
|
|
@ -2164,7 +2164,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:text-10 {
|
||||
font-size: 0.625rem;
|
||||
}
|
||||
|
|
@ -2182,7 +2182,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:text-11 {
|
||||
font-size: 0.6875rem;
|
||||
}
|
||||
|
|
@ -2200,7 +2200,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:text-12 {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
|
@ -2218,7 +2218,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:text-14 {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
|
@ -2236,7 +2236,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:text-16 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
@ -2254,7 +2254,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:text-18 {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
|
@ -2272,7 +2272,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:text-20 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
|
@ -2290,7 +2290,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:text-24 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
|
@ -2308,7 +2308,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:text-30 {
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
|
@ -2326,7 +2326,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:text-36 {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
|
@ -2344,7 +2344,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:text-base {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
@ -2362,7 +2362,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:text-inherit {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
|
@ -2527,7 +2527,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:p-0 {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -2734,7 +2734,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:p-2 {
|
||||
padding: 0.125rem;
|
||||
}
|
||||
|
|
@ -2941,7 +2941,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:p-5 {
|
||||
padding: 0.313rem;
|
||||
}
|
||||
|
|
@ -3148,7 +3148,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:p-8 {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
|
@ -3355,7 +3355,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:p-10 {
|
||||
padding: 0.625rem;
|
||||
}
|
||||
|
|
@ -3562,7 +3562,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:p-16 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
|
@ -3769,7 +3769,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:p-20 {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
|
@ -3976,7 +3976,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:p-24 {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
|
@ -4183,7 +4183,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:p-36 {
|
||||
padding: 2.25rem;
|
||||
}
|
||||
|
|
@ -4390,7 +4390,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:p-auto {
|
||||
padding: auto;
|
||||
}
|
||||
|
|
@ -4458,7 +4458,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:grid {
|
||||
display: grid;
|
||||
}
|
||||
|
|
@ -4532,7 +4532,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
|
@ -4741,7 +4741,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:gap-0 {
|
||||
gap: 0;
|
||||
}
|
||||
|
|
@ -5226,7 +5226,7 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
@media (min-width: 1400px) {
|
||||
.lg\:col-start-1 {
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "knacss",
|
||||
"version": "8.0.5",
|
||||
"version": "8.1",
|
||||
"homepage": "http://www.knacss.com/",
|
||||
"bugs": "https://github.com/alsacreations/KNACSS/issues",
|
||||
"author": "Raphaël GOETTER, Alsacreations (http://www.alsacreations.fr)",
|
||||
|
|
|
|||
|
|
@ -7,10 +7,9 @@
|
|||
// ----------------
|
||||
|
||||
// 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: 1330px,
|
||||
lg: 1400px,
|
||||
) !default;
|
||||
|
||||
$small: map-get($breakpoints, sm) !default;
|
||||
|
|
@ -21,8 +20,7 @@ $large: map-get($breakpoints, lg) !default;
|
|||
// Spacers
|
||||
// ----------------
|
||||
|
||||
$spacers: (
|
||||
"0": 0,
|
||||
$spacers: ("0": 0,
|
||||
// none
|
||||
"2": 0.125rem,
|
||||
// tiny
|
||||
|
|
@ -59,8 +57,7 @@ $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,
|
||||
|
|
@ -72,16 +69,25 @@ $gaps: (
|
|||
// Fonts
|
||||
// ----------------
|
||||
|
||||
// Font families
|
||||
$font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
// 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-monospace: consolas,
|
||||
courier,
|
||||
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,
|
||||
|
|
@ -98,7 +104,7 @@ $font-size: (
|
|||
$font-size-html: 100%;
|
||||
$font-size-base: 1rem;
|
||||
|
||||
// Font weights
|
||||
// Graisses des Fonts
|
||||
$weight-light: 200;
|
||||
$weight-book: 300;
|
||||
$weight-regular: 400;
|
||||
|
|
@ -109,42 +115,56 @@ $weight-bold: 700;
|
|||
// Couleurs
|
||||
// ----------------
|
||||
|
||||
// Palette de couleur (à ne pas utiliser en variables sauf $white and $black)
|
||||
$white: #ffffff;
|
||||
$black: #000000;
|
||||
// Variables niveaux de gris
|
||||
|
||||
$color-gray-1: #f7fafc;
|
||||
$color-gray-2: #abc3c2;
|
||||
$color-gray-3: #454d5d;
|
||||
$color-gray-4: #212529;
|
||||
$gray-100: #f8f9fa;
|
||||
$gray-200: #e9ecef;
|
||||
$gray-300: #dee2e6;
|
||||
$gray-400: #ced4da;
|
||||
$gray-500: #adb5bd;
|
||||
$gray-600: #6c757d;
|
||||
$gray-700: #495057;
|
||||
$gray-800: #343a40;
|
||||
$gray-900: #212529;
|
||||
$white: #FFFFFF;
|
||||
$black: #0F0F0F;
|
||||
|
||||
$color-blue-1: #0275d8;
|
||||
$color-blue-2: #04527b;
|
||||
$color-blue-3: #033651;
|
||||
|
||||
// Palette non agnostic (à utiliser en variables)
|
||||
// Variables couleurs globales
|
||||
|
||||
$color-alpha: $color-gray-1; // couleurs fréquentes
|
||||
$color-beta: $color-gray-3;
|
||||
$color-gamma: $color-gray-4;
|
||||
$body-color: $gray-900;
|
||||
$body-bg: $white;
|
||||
|
||||
$color-delta: $color-blue-1;
|
||||
$color-epsilon: $color-blue-2;
|
||||
$primary: #6fa939; // Couleur dominante. Elle peut s'appliquer à la fois à des surfaces ou à des contenus.
|
||||
$primary-accent: #4e920f; // Modifieur de couleur dominante (survol, bordure)
|
||||
$on-primary: $white; // Contenus (texte, lien, icône) affichés par-dessus une couche $primary
|
||||
|
||||
$color-gradient-alpha: linear-gradient(
|
||||
to left bottom,
|
||||
$color-alpha,
|
||||
$color-beta
|
||||
);
|
||||
$secondary: #008cba; // Couleur d'accentuation. Elle s'applique généralement aux liens, mais peut s'appliquer à la fois à des surfaces ou à des contenus.
|
||||
$secondary-accent: #027da7; // Modifieur de couleur d'accentuation (survol, bordure)
|
||||
$on-secondary: $white; // Contenus affichés par-dessus une couche $secondary
|
||||
|
||||
// Variables couleurs statuts
|
||||
|
||||
$success: #dff0d9;
|
||||
$success-border: #d6e9c6;
|
||||
$on-success: #28a745; // contenu sur couche success
|
||||
$on-success-accent: #4d9c4d; // lien sur couche success
|
||||
|
||||
$info: #d9edf7;
|
||||
$info-border: #bce8f1;
|
||||
$on-info: #17a2b8;
|
||||
$on-info-accent: #4fa8c4;
|
||||
|
||||
$warning: #fcf8e3;
|
||||
$warning-border: #faebcc;
|
||||
$on-warning: #ffc107;
|
||||
$on-warning-accent: #d19644;
|
||||
|
||||
$error: #fff2f2;
|
||||
$error-border: #ebccd1;
|
||||
$on-error: #d9534f;
|
||||
$on-error-accent: #be4945;
|
||||
|
||||
$color-alternate-1: #5cb85c; // couleurs moins fréquentes
|
||||
$color-alternate-1b: #4d9c4d;
|
||||
$color-alternate-2: #5bc0de;
|
||||
$color-alternate-2b: #4fa8c4;
|
||||
$color-alternate-3: #f0ad4e;
|
||||
$color-alternate-3b: #d19644;
|
||||
$color-alternate-4: #d9534f;
|
||||
$color-alternate-4b: #be4945;
|
||||
|
||||
// Links
|
||||
$link-decoration: underline;
|
||||
|
|
@ -160,8 +180,7 @@ $radius-circle: 50%;
|
|||
// ----------------
|
||||
// Liste des propriétés utilitaires (note display: grid se trouve dans Grillade)
|
||||
// ----------------
|
||||
$utils: (
|
||||
(hidden, display, none),
|
||||
$utils: ((hidden, display, none),
|
||||
(block, display, block),
|
||||
(inline, display, inline),
|
||||
(inline-block, display, inline-block),
|
||||
|
|
@ -221,5 +240,4 @@ $utils: (
|
|||
(align-bottom, vertical-align, bottom),
|
||||
(align-middle, vertical-align, middle),
|
||||
(item-first, order, -100),
|
||||
(item-last, order, 100)
|
||||
) !default;
|
||||
(item-last, order, 100)) !default;
|
||||
|
|
@ -10,8 +10,10 @@
|
|||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box; /* 1 */
|
||||
min-width: 0; /* 2 */
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
min-width: 0;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -22,9 +24,12 @@
|
|||
|
||||
html {
|
||||
font-size: $font-size-html;
|
||||
-webkit-tap-highlight-color: transparent; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
overflow-wrap: break-word; /* 3 */
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
/* 1 */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* 2 */
|
||||
overflow-wrap: break-word;
|
||||
/* 3 */
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -32,8 +37,8 @@ body {
|
|||
font-family: $font-family-base;
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
background-color: $white;
|
||||
color: $color-gamma;
|
||||
background-color: $body-bg;
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -52,7 +57,7 @@ h5,
|
|||
.h5-like,
|
||||
h6,
|
||||
.h6-like {
|
||||
color: $color-gamma;
|
||||
color: $gray-900;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -60,14 +65,14 @@ h6,
|
|||
*/
|
||||
|
||||
a {
|
||||
color: $color-beta;
|
||||
color: $gray-600;
|
||||
text-decoration: $link-decoration;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:hover,
|
||||
a:active {
|
||||
color: $color-gamma;
|
||||
color: $gray-900;
|
||||
text-decoration: $link-decoration-hover;
|
||||
}
|
||||
|
||||
|
|
@ -77,9 +82,12 @@ a:active {
|
|||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
border-bottom: none;
|
||||
/* 1 */
|
||||
text-decoration: underline;
|
||||
/* 2 */
|
||||
text-decoration: underline dotted;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
*/
|
||||
|
||||
$checkbox-color: $white;
|
||||
$checkbox-background: $color-alpha;
|
||||
$checkbox-background: $primary;
|
||||
$checkbox-size: 2rem;
|
||||
$checkbox-border-radius: 4px;
|
||||
|
||||
|
|
@ -31,13 +31,13 @@ $checkbox-border-radius: 4px;
|
|||
height: $checkbox-size;
|
||||
vertical-align: text-bottom;
|
||||
outline: 0;
|
||||
box-shadow: inset 0 0 0 1px $color-alpha;
|
||||
box-shadow: inset 0 0 0 1px $primary;
|
||||
background-color: $checkbox-color;
|
||||
transition: background-color 0.15s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox + label {
|
||||
.checkbox+label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ $checkbox-border-radius: 4px;
|
|||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.checkbox:disabled + label {
|
||||
.checkbox:disabled+label {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
* radio variables (you can change them)
|
||||
*/
|
||||
|
||||
$radio-color: $color-alpha;
|
||||
$radio-color: $primary;
|
||||
$radio-background: $white;
|
||||
$radio-size: 2rem;
|
||||
$radio-border-radius: 50%;
|
||||
|
|
@ -31,13 +31,13 @@ $radio-border-radius: 50%;
|
|||
height: $radio-size;
|
||||
vertical-align: text-bottom;
|
||||
outline: 0;
|
||||
box-shadow: inset 0 0 0 1px $color-alpha;
|
||||
box-shadow: inset 0 0 0 1px $primary;
|
||||
background-color: $radio-background;
|
||||
transition: background-size 0.15s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.radio + label {
|
||||
.radio+label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ $radio-border-radius: 50%;
|
|||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.radio:disabled + label {
|
||||
.radio:disabled+label {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
|
@ -55,5 +55,5 @@ $radio-border-radius: 50%;
|
|||
background-size: 70% 70%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: $color-alpha;
|
||||
background-color: $primary;
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
/*!
|
||||
* KNACSS Reborn: Just keep it simple!
|
||||
* @author: Alsacreations
|
||||
* v8.0.5 2021/07
|
||||
* v8.1 2022/01
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue