dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refonte des variables de couleurs

Browse source
This commit is contained in:
Raphaël Goetter 2022-01-05 17:34:13 +01:00
parent 8e95e4cdd9
commit 59f02b6c57
10 changed files with 197 additions and 172 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -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) ## 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/> - 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)

3
changelog.md
View file

@ -1,6 +1,7 @@
# Changelog # 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 - 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 - 5 mars 2021 : les classes utilitaires font à présent partie du Core
- 26 novembre 2020 : Documentation + V1.0.0 - 26 novembre 2020 : Documentation + V1.0.0

186
css/knacss-full/knacss.css
View file

@ -2,7 +2,7 @@
/*! /*!
* KNACSS Reborn: Just keep it simple! * KNACSS Reborn: Just keep it simple!
* @author: Alsacreations * @author: Alsacreations
* v8.0.4 2021/04 * v8.1 2022/01
* Licence WTFPL http://www.wtfpl.net/ * 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-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;
color: #212529; color: #212529;
} }
@ -67,7 +67,7 @@ h6,
* Links * Links
*/ */
a { a {
color: #454d5d; color: #6c757d;
text-decoration: underline; text-decoration: underline;
} }
@ -633,9 +633,9 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.layout-maxed { .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 { .lg\:hidden {
display: none; display: none;
} }
@ -939,7 +939,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:block { .lg\:block {
display: block; display: block;
} }
@ -957,7 +957,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:inline { .lg\:inline {
display: inline; display: inline;
} }
@ -975,7 +975,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:inline-block { .lg\:inline-block {
display: inline-block; display: inline-block;
} }
@ -993,7 +993,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:flex { .lg\:flex {
display: flex; display: flex;
} }
@ -1011,7 +1011,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:flex-row { .lg\:flex-row {
flex-direction: row; flex-direction: row;
} }
@ -1029,7 +1029,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:flex-col { .lg\:flex-col {
flex-direction: column; flex-direction: column;
} }
@ -1047,7 +1047,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:flex-wrap { .lg\:flex-wrap {
flex-wrap: wrap; flex-wrap: wrap;
} }
@ -1065,7 +1065,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:flex-no-wrap { .lg\:flex-no-wrap {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
@ -1083,7 +1083,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:flex-shrink { .lg\:flex-shrink {
flex-shrink: 1; flex-shrink: 1;
} }
@ -1101,7 +1101,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:flex-no-shrink { .lg\:flex-no-shrink {
flex-shrink: 0; flex-shrink: 0;
} }
@ -1119,7 +1119,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:flex-grow { .lg\:flex-grow {
flex-grow: 1; flex-grow: 1;
} }
@ -1137,7 +1137,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:flex-no-grow { .lg\:flex-no-grow {
flex-grow: 0; flex-grow: 0;
} }
@ -1155,7 +1155,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:float-left { .lg\:float-left {
float: left; float: left;
} }
@ -1173,7 +1173,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:float-right { .lg\:float-right {
float: right; float: right;
} }
@ -1191,7 +1191,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:float-none { .lg\:float-none {
float: none; float: none;
} }
@ -1209,7 +1209,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:text-bold { .lg\:text-bold {
font-weight: bold; font-weight: bold;
} }
@ -1227,7 +1227,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:text-italic { .lg\:text-italic {
font-style: italic; font-style: italic;
} }
@ -1245,7 +1245,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:text-uppercase { .lg\:text-uppercase {
text-transform: uppercase; text-transform: uppercase;
} }
@ -1263,7 +1263,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:text-lowercase { .lg\:text-lowercase {
text-transform: lowercase; text-transform: lowercase;
} }
@ -1281,7 +1281,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:text-smaller { .lg\:text-smaller {
font-size: smaller; font-size: smaller;
} }
@ -1299,7 +1299,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:text-bigger { .lg\:text-bigger {
font-size: bigger; font-size: bigger;
} }
@ -1317,7 +1317,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:text-left { .lg\:text-left {
text-align: left; text-align: left;
} }
@ -1335,7 +1335,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:text-center { .lg\:text-center {
text-align: center; text-align: center;
} }
@ -1353,7 +1353,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:text-right { .lg\:text-right {
text-align: right; text-align: right;
} }
@ -1371,7 +1371,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:text-justify { .lg\:text-justify {
text-align: justify; text-align: justify;
} }
@ -1389,7 +1389,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:text-wrap { .lg\:text-wrap {
overflow-wrap: break-word; overflow-wrap: break-word;
} }
@ -1407,7 +1407,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:justify-start { .lg\:justify-start {
justify-content: flex-start; justify-content: flex-start;
} }
@ -1425,7 +1425,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:justify-end { .lg\:justify-end {
justify-content: flex-end; justify-content: flex-end;
} }
@ -1443,7 +1443,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:justify-center { .lg\:justify-center {
justify-content: center; justify-content: center;
} }
@ -1461,7 +1461,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:justify-between { .lg\:justify-between {
justify-content: space-between; justify-content: space-between;
} }
@ -1479,7 +1479,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:justify-around { .lg\:justify-around {
justify-content: space-around; justify-content: space-around;
} }
@ -1497,7 +1497,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:justify-evenly { .lg\:justify-evenly {
justify-content: space-evenly; justify-content: space-evenly;
} }
@ -1515,7 +1515,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:justify-items-start { .lg\:justify-items-start {
justify-items: start; justify-items: start;
} }
@ -1533,7 +1533,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:justify-items-end { .lg\:justify-items-end {
justify-items: end; justify-items: end;
} }
@ -1551,7 +1551,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:justify-items-center { .lg\:justify-items-center {
justify-items: center; justify-items: center;
} }
@ -1569,7 +1569,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:align-start { .lg\:align-start {
align-content: start; align-content: start;
} }
@ -1587,7 +1587,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:align-end { .lg\:align-end {
align-content: end; align-content: end;
} }
@ -1605,7 +1605,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:align-center { .lg\:align-center {
align-content: center; align-content: center;
} }
@ -1623,7 +1623,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:align-between { .lg\:align-between {
align-content: space-between; align-content: space-between;
} }
@ -1641,7 +1641,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:align-around { .lg\:align-around {
align-content: space-around; align-content: space-around;
} }
@ -1659,7 +1659,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:align-evenly { .lg\:align-evenly {
align-content: space-evenly; align-content: space-evenly;
} }
@ -1677,7 +1677,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:align-items-start { .lg\:align-items-start {
align-items: flex-start; align-items: flex-start;
} }
@ -1695,7 +1695,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:align-items-end { .lg\:align-items-end {
align-items: flex-end; align-items: flex-end;
} }
@ -1713,7 +1713,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:align-items-center { .lg\:align-items-center {
align-items: center; align-items: center;
} }
@ -1731,7 +1731,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:place-center { .lg\:place-center {
place-content: center; place-content: center;
} }
@ -1749,7 +1749,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:justify-self-auto { .lg\:justify-self-auto {
justify-self: auto; justify-self: auto;
} }
@ -1767,7 +1767,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:justify-self-start { .lg\:justify-self-start {
justify-self: start; justify-self: start;
} }
@ -1785,7 +1785,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:justify-self-end { .lg\:justify-self-end {
justify-self: end; justify-self: end;
} }
@ -1803,7 +1803,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:justify-self-center { .lg\:justify-self-center {
justify-self: center; justify-self: center;
} }
@ -1821,7 +1821,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:justify-self-stretch { .lg\:justify-self-stretch {
justify-self: stretch; justify-self: stretch;
} }
@ -1839,7 +1839,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:align-self-auto { .lg\:align-self-auto {
align-self: auto; align-self: auto;
} }
@ -1857,7 +1857,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:align-self-start { .lg\:align-self-start {
align-self: flex-start; align-self: flex-start;
} }
@ -1875,7 +1875,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:align-self-end { .lg\:align-self-end {
align-self: flex-end; align-self: flex-end;
} }
@ -1893,7 +1893,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:align-self-center { .lg\:align-self-center {
align-self: center; align-self: center;
} }
@ -1911,7 +1911,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:align-self-stretch { .lg\:align-self-stretch {
align-self: stretch; align-self: stretch;
} }
@ -1929,7 +1929,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:align-top { .lg\:align-top {
vertical-align: top; vertical-align: top;
} }
@ -1947,7 +1947,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:align-bottom { .lg\:align-bottom {
vertical-align: bottom; vertical-align: bottom;
} }
@ -1965,7 +1965,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:align-middle { .lg\:align-middle {
vertical-align: middle; vertical-align: middle;
} }
@ -1983,7 +1983,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:item-first { .lg\:item-first {
order: -100; order: -100;
} }
@ -2001,7 +2001,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:item-last { .lg\:item-last {
order: 100; order: 100;
} }
@ -2077,7 +2077,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:visually-hidden { .lg\:visually-hidden {
position: absolute !important; position: absolute !important;
border: 0 !important; border: 0 !important;
@ -2164,7 +2164,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:text-10 { .lg\:text-10 {
font-size: 0.625rem; font-size: 0.625rem;
} }
@ -2182,7 +2182,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:text-11 { .lg\:text-11 {
font-size: 0.6875rem; font-size: 0.6875rem;
} }
@ -2200,7 +2200,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:text-12 { .lg\:text-12 {
font-size: 0.75rem; font-size: 0.75rem;
} }
@ -2218,7 +2218,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:text-14 { .lg\:text-14 {
font-size: 0.875rem; font-size: 0.875rem;
} }
@ -2236,7 +2236,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:text-16 { .lg\:text-16 {
font-size: 1rem; font-size: 1rem;
} }
@ -2254,7 +2254,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:text-18 { .lg\:text-18 {
font-size: 1.125rem; font-size: 1.125rem;
} }
@ -2272,7 +2272,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:text-20 { .lg\:text-20 {
font-size: 1.25rem; font-size: 1.25rem;
} }
@ -2290,7 +2290,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:text-24 { .lg\:text-24 {
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -2308,7 +2308,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:text-30 { .lg\:text-30 {
font-size: 1.875rem; font-size: 1.875rem;
} }
@ -2326,7 +2326,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:text-36 { .lg\:text-36 {
font-size: 2.25rem; font-size: 2.25rem;
} }
@ -2344,7 +2344,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:text-base { .lg\:text-base {
font-size: 1rem; font-size: 1rem;
} }
@ -2362,7 +2362,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:text-inherit { .lg\:text-inherit {
font-size: inherit; font-size: inherit;
} }
@ -2527,7 +2527,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:p-0 { .lg\:p-0 {
padding: 0; padding: 0;
} }
@ -2734,7 +2734,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:p-2 { .lg\:p-2 {
padding: 0.125rem; padding: 0.125rem;
} }
@ -2941,7 +2941,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:p-5 { .lg\:p-5 {
padding: 0.313rem; padding: 0.313rem;
} }
@ -3148,7 +3148,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:p-8 { .lg\:p-8 {
padding: 0.5rem; padding: 0.5rem;
} }
@ -3355,7 +3355,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:p-10 { .lg\:p-10 {
padding: 0.625rem; padding: 0.625rem;
} }
@ -3562,7 +3562,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:p-16 { .lg\:p-16 {
padding: 1rem; padding: 1rem;
} }
@ -3769,7 +3769,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:p-20 { .lg\:p-20 {
padding: 1.25rem; padding: 1.25rem;
} }
@ -3976,7 +3976,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:p-24 { .lg\:p-24 {
padding: 1.5rem; padding: 1.5rem;
} }
@ -4183,7 +4183,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:p-36 { .lg\:p-36 {
padding: 2.25rem; padding: 2.25rem;
} }
@ -4390,7 +4390,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:p-auto { .lg\:p-auto {
padding: auto; padding: auto;
} }
@ -4458,7 +4458,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:grid { .lg\:grid {
display: grid; display: grid;
} }
@ -4532,7 +4532,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:grid-cols-1 { .lg\:grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr)); grid-template-columns: repeat(1, minmax(0, 1fr));
} }
@ -4741,7 +4741,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:gap-0 { .lg\:gap-0 {
gap: 0; gap: 0;
} }
@ -5226,7 +5226,7 @@ template {
} }
} }
@media (min-width: 1330px) { @media (min-width: 1400px) {
.lg\:col-start-1 { .lg\:col-start-1 {
grid-column-start: 1; grid-column-start: 1;
} }

2
css/knacss-mini/knacss.css
View file

File diff suppressed because one or more lines are too long

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "knacss", "name": "knacss",
"version": "8.0.5", "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)",

112
sass/abstracts/_variables-sass.scss
View file

@ -7,10 +7,9 @@
// ---------------- // ----------------
// 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: 1330px, lg: 1400px,
) !default; ) !default;
$small: map-get($breakpoints, sm) !default; $small: map-get($breakpoints, sm) !default;
@ -21,8 +20,7 @@ $large: map-get($breakpoints, lg) !default;
// Spacers // Spacers
// ---------------- // ----------------
$spacers: ( $spacers: ("0": 0,
"0": 0,
// none // none
"2": 0.125rem, "2": 0.125rem,
// tiny // tiny
@ -59,8 +57,7 @@ $spacer-large-plus: map-get($spacers, "36") !default;
$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,
@ -72,16 +69,25 @@ $gaps: (
// Fonts // Fonts
// ---------------- // ----------------
// Font families // Familles de fonts
$font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", $font-family-base: system-ui,
Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
$font-family-headings: sans-serif; $font-family-headings: sans-serif;
$font-family-monospace: consolas, courier, monospace; $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,
@ -98,7 +104,7 @@ $font-size: (
$font-size-html: 100%; $font-size-html: 100%;
$font-size-base: 1rem; $font-size-base: 1rem;
// Font weights // Graisses des Fonts
$weight-light: 200; $weight-light: 200;
$weight-book: 300; $weight-book: 300;
$weight-regular: 400; $weight-regular: 400;
@ -109,42 +115,56 @@ $weight-bold: 700;
// Couleurs // Couleurs
// ---------------- // ----------------
// Palette de couleur (à ne pas utiliser en variables sauf $white and $black) // Variables niveaux de gris
$white: #ffffff;
$black: #000000;
$color-gray-1: #f7fafc; $gray-100: #f8f9fa;
$color-gray-2: #abc3c2; $gray-200: #e9ecef;
$color-gray-3: #454d5d; $gray-300: #dee2e6;
$color-gray-4: #212529; $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 $body-color: $gray-900;
$color-beta: $color-gray-3; $body-bg: $white;
$color-gamma: $color-gray-4;
$color-delta: $color-blue-1; $primary: #6fa939; // Couleur dominante. Elle peut s'appliquer à la fois à des surfaces ou à des contenus.
$color-epsilon: $color-blue-2; $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( $secondary: #008cba; // Couleur d'accentuation. Elle s'applique généralement aux liens, mais peut s'appliquer à la fois à des surfaces ou à des contenus.
to left bottom, $secondary-accent: #027da7; // Modifieur de couleur d'accentuation (survol, bordure)
$color-alpha, $on-secondary: $white; // Contenus affichés par-dessus une couche $secondary
$color-beta
); // 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 // Links
$link-decoration: underline; $link-decoration: underline;
@ -160,8 +180,7 @@ $radius-circle: 50%;
// ---------------- // ----------------
// Liste des propriétés utilitaires (note display: grid se trouve dans Grillade) // Liste des propriétés utilitaires (note display: grid se trouve dans Grillade)
// ---------------- // ----------------
$utils: ( $utils: ((hidden, display, none),
(hidden, display, none),
(block, display, block), (block, display, block),
(inline, display, inline), (inline, display, inline),
(inline-block, display, inline-block), (inline-block, display, inline-block),
@ -221,5 +240,4 @@ $utils: (
(align-bottom, vertical-align, bottom), (align-bottom, vertical-align, bottom),
(align-middle, vertical-align, middle), (align-middle, vertical-align, middle),
(item-first, order, -100), (item-first, order, -100),
(item-last, order, 100) (item-last, order, 100)) !default;
) !default;

34
sass/base/_reset-base.scss
View file

@ -10,8 +10,10 @@
*, *,
*::before, *::before,
*::after { *::after {
box-sizing: border-box; /* 1 */ box-sizing: border-box;
min-width: 0; /* 2 */ /* 1 */
min-width: 0;
/* 2 */
} }
/* /*
@ -22,9 +24,12 @@
html { html {
font-size: $font-size-html; font-size: $font-size-html;
-webkit-tap-highlight-color: transparent; /* 1 */ -webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%; /* 2 */ /* 1 */
overflow-wrap: break-word; /* 3 */ -webkit-text-size-adjust: 100%;
/* 2 */
overflow-wrap: break-word;
/* 3 */
} }
body { body {
@ -32,8 +37,8 @@ body {
font-family: $font-family-base; font-family: $font-family-base;
font-size: $font-size-base; font-size: $font-size-base;
line-height: $line-height-base; line-height: $line-height-base;
background-color: $white; background-color: $body-bg;
color: $color-gamma; color: $body-color;
} }
/* /*
@ -52,7 +57,7 @@ h5,
.h5-like, .h5-like,
h6, h6,
.h6-like { .h6-like {
color: $color-gamma; color: $gray-900;
} }
/* /*
@ -60,14 +65,14 @@ h6,
*/ */
a { a {
color: $color-beta; color: $gray-600;
text-decoration: $link-decoration; text-decoration: $link-decoration;
} }
a:focus, a:focus,
a:hover, a:hover,
a:active { a:active {
color: $color-gamma; color: $gray-900;
text-decoration: $link-decoration-hover; text-decoration: $link-decoration-hover;
} }
@ -77,9 +82,12 @@ a:active {
*/ */
abbr[title] { abbr[title] {
border-bottom: none; /* 1 */ border-bottom: none;
text-decoration: underline; /* 2 */ /* 1 */
text-decoration: underline dotted; /* 2 */ text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */
} }
/* /*

4
sass/components/_checkbox.scss
View file

@ -12,7 +12,7 @@
*/ */
$checkbox-color: $white; $checkbox-color: $white;
$checkbox-background: $color-alpha; $checkbox-background: $primary;
$checkbox-size: 2rem; $checkbox-size: 2rem;
$checkbox-border-radius: 4px; $checkbox-border-radius: 4px;
@ -31,7 +31,7 @@ $checkbox-border-radius: 4px;
height: $checkbox-size; height: $checkbox-size;
vertical-align: text-bottom; vertical-align: text-bottom;
outline: 0; outline: 0;
box-shadow: inset 0 0 0 1px $color-alpha; 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;

6
sass/components/_radio.scss
View file

@ -11,7 +11,7 @@
* radio variables (you can change them) * radio variables (you can change them)
*/ */
$radio-color: $color-alpha; $radio-color: $primary;
$radio-background: $white; $radio-background: $white;
$radio-size: 2rem; $radio-size: 2rem;
$radio-border-radius: 50%; $radio-border-radius: 50%;
@ -31,7 +31,7 @@ $radio-border-radius: 50%;
height: $radio-size; height: $radio-size;
vertical-align: text-bottom; vertical-align: text-bottom;
outline: 0; outline: 0;
box-shadow: inset 0 0 0 1px $color-alpha; 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;
@ -55,5 +55,5 @@ $radio-border-radius: 50%;
background-size: 70% 70%; background-size: 70% 70%;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-color: $color-alpha; background-color: $primary;
} }

2
sass/knacss.scss
View file

@ -1,7 +1,7 @@
/*! /*!
* KNACSS Reborn: Just keep it simple! * KNACSS Reborn: Just keep it simple!
* @author: Alsacreations * @author: Alsacreations
* v8.0.5 2021/07 * v8.1 2022/01
* Licence WTFPL http://www.wtfpl.net/ * Licence WTFPL http://www.wtfpl.net/
*/ */