Compare commits
No commits in common. "master" and "v8.0.2" have entirely different histories.
18 changed files with 256 additions and 5186 deletions
43
README.md
43
README.md
|
|
@ -1,14 +1,49 @@
|
|||
# KNACSS
|
||||
|
||||
**Né en 2012 et après plus de 10 années de bons et loyaux services, le projet initial « KNACSS » d'Alsacréations est officiellement obsolète, n'est plus maintenu et ne sera plus mis à jour.**
|
||||
<http://www.knacss.com>
|
||||
|
||||
## Documentation version v8 (v8 = Reborn)
|
||||
KNACSS, c'est une sorte de feuille de style CSS "reset" sur-vitaminée qui permet de commencer un projet à partir de zéro tout en tenant compte de bonnes pratiques générales (accessibilité, performance, responsive webdesign, grille de mise en forme).
|
||||
|
||||
- Site web de présentation de KNACSS Reborn : <https://www.knacss.com/>
|
||||
**Né en 2012 et après près de 10 années de bons et loyaux services, le projet initial « KNACSS » d'Alsacréations laisse place à une toute nouvelle version, totalement remaniée : KNACSS Reborn.**
|
||||
|
||||
## Documentation version actuelle (v8 = Reborn)
|
||||
|
||||
- Site web de présentation de KNACSS Reborn : <http://knacss.com>
|
||||
- [**Documentation KNACSS Reborn**](https://www.knacss.com/doc.html)
|
||||
|
||||
## Documentation anciennes versions (v7)
|
||||
|
||||
- [**Documentation KNACSS v7**](https://www.knacss.com/doc-old.html)
|
||||
- [**Pense-bête PDF KNACSS v7**](https://www.knacss.com/assets/pdf/knacss7-cheatsheet.pdf)
|
||||
- [**Pense-bête PDF version 7**](https://www.knacss.com/assets/pdf/knacss7-cheatsheet.pdf)
|
||||
|
||||
## Modulaire
|
||||
|
||||
Principe de briques modulaires :
|
||||
|
||||
- KNACSS Reborn est constitué uniquement des fichiers "Core".
|
||||
- Les fichiers "Utils" seront des briques optionnelles (= les `@import` seront commentés par défaut).
|
||||
|
||||
```scss
|
||||
// CORE
|
||||
@import "abstracts/variables-sass";
|
||||
|
||||
@import "base/reset-base";
|
||||
@import "base/reset-accessibility";
|
||||
@import "base/reset-forms";
|
||||
@import "base/reset-print";
|
||||
@import "base/layout";
|
||||
|
||||
@import "abstracts/mixins-sass";
|
||||
|
||||
// UTILITY CLASSES
|
||||
// @import "utils/utils-global";
|
||||
// @import "utils/utils-spacers";
|
||||
// @import "utils/grillade";
|
||||
|
||||
// COMPONENTS (add them only if you need)
|
||||
// @import "components/button";
|
||||
// @import "components/burger";
|
||||
// @import "components/checkbox";
|
||||
// @import "components/radio";
|
||||
// @import "components/quote";
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,11 +1,5 @@
|
|||
# Changelog
|
||||
|
||||
- 24 janvier 2022 (8.2.1) : corrections des radio / checkbox
|
||||
- 19 janvier 2022 (8.2) : refonte des variables d'espacement
|
||||
- 5 janvier 2022 (8.1) : refonte des variables de couleur
|
||||
- 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
|
||||
- 22 octobre 2020 : grosse remise à jour. V0.9.0
|
||||
- 12 octobre 2020 : début de refonte classes utilitaires
|
||||
|
|
@ -97,7 +91,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-micro`)
|
||||
- renommage des variables d'espacement (`$tiny-value` -> `$spacer-tiny`)
|
||||
- automatisation des classes utilitaires via Sass
|
||||
- suppression du namespace "kna-"
|
||||
- refonte :
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
|
|
@ -4,6 +4,7 @@ var postcss = require('gulp-postcss');
|
|||
var CombineMQ = require('postcss-combine-media-query');
|
||||
var autoprefixer = require('autoprefixer');
|
||||
var CSSnano = require('cssnano');
|
||||
var rename = require('gulp-rename');
|
||||
|
||||
gulp.task('css:full', () => {
|
||||
return gulp.src('sass/knacss.scss')
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "knacss",
|
||||
"version": "8.2.1",
|
||||
"version": "v8.0.1",
|
||||
"homepage": "http://www.knacss.com/",
|
||||
"bugs": "https://github.com/alsacreations/KNACSS/issues",
|
||||
"author": "Raphaël GOETTER, Alsacreations (http://www.alsacreations.fr)",
|
||||
|
|
@ -32,6 +32,7 @@
|
|||
"dependencies": {
|
||||
"autoprefixer": "^9.7.1",
|
||||
"postcss-combine-media-query": "^1.0.1",
|
||||
"cssnano": "^4.1.10"
|
||||
"cssnano": "^4.1.10",
|
||||
"gulp-rename": "^2.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,30 +2,22 @@
|
|||
// ex. @include respond-to("medium-up") {...}
|
||||
|
||||
$bp-aliases: (
|
||||
"small": (
|
||||
max-width: #{$small - 1},
|
||||
),
|
||||
"medium": (
|
||||
max-width: #{$medium - 1},
|
||||
),
|
||||
"large": (
|
||||
max-width: #{$large - 1},
|
||||
),
|
||||
"small-up": (
|
||||
min-width: #{$small},
|
||||
),
|
||||
"medium-up": (
|
||||
min-width: #{$medium},
|
||||
),
|
||||
"large-up": (
|
||||
min-width: #{$large},
|
||||
),
|
||||
);
|
||||
'small' : (max-width: #{$small - 1}),
|
||||
'medium' : (max-width: #{$medium - 1}),
|
||||
'large' : (max-width: #{$large - 1}),
|
||||
'extra-large' : (max-width: #{$extra-large - 1}),
|
||||
'small-up' : (min-width: #{$small}),
|
||||
'medium-up' : (min-width: #{$medium}),
|
||||
'large-up' : (min-width: #{$large}),
|
||||
'extra-large-up' : (min-width: #{$extra-large})
|
||||
);
|
||||
|
||||
// Source : https://www.sitepoint.com/managing-responsive-breakpoints-sass/
|
||||
@mixin respond-to($name) {
|
||||
|
||||
// If the key exists in the map
|
||||
@if map-has-key($bp-aliases, $name) {
|
||||
|
||||
// Prints a media query based on the value
|
||||
@media #{inspect(map-get($bp-aliases, $name))} {
|
||||
@content;
|
||||
|
|
|
|||
|
|
@ -1,97 +1,76 @@
|
|||
// ----------------
|
||||
// Config Sass et variables
|
||||
// Sass Config and variables
|
||||
// ----------------
|
||||
|
||||
// ----------------
|
||||
// Valeurs de Breakpoints
|
||||
// Breakpoints values
|
||||
// ----------------
|
||||
|
||||
// Hypothèse : smartphone portrait/paysage < 576px < gros smartphone paysage + tablette portrait < 992px < tablette paysage < 1330px < laptop et plus
|
||||
$breakpoints: (
|
||||
sm: 576px,
|
||||
md: 992px,
|
||||
lg: 1400px,
|
||||
md: 768px,
|
||||
lg: 1024px,
|
||||
xl: 1330px,
|
||||
) !default;
|
||||
|
||||
$small: map-get($breakpoints, sm) !default;
|
||||
$medium: map-get($breakpoints, md) !default;
|
||||
$large: map-get($breakpoints, lg) !default;
|
||||
$extra-large: map-get($breakpoints, xl) !default;
|
||||
|
||||
// ----------------
|
||||
// Spacers
|
||||
// Spacers values
|
||||
// ----------------
|
||||
|
||||
$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
|
||||
"0": 0,
|
||||
"1": 0.5rem,
|
||||
// tiny
|
||||
"2": 0.75rem,
|
||||
// tiny-plus
|
||||
"3": 1rem,
|
||||
// small
|
||||
"4": 1.5rem,
|
||||
// small-plus
|
||||
"5": 2rem,
|
||||
// medium
|
||||
"6": 3rem,
|
||||
// medium-plus
|
||||
"7": 5rem,
|
||||
// large
|
||||
"auto": auto,
|
||||
);
|
||||
) !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");
|
||||
$spacer-none: map-get($spacers, "0") !default;
|
||||
$spacer-tiny: map-get($spacers, "1") !default;
|
||||
$spacer-tiny-plus: map-get($spacers, "2") !default;
|
||||
$spacer-small: map-get($spacers, "3") !default;
|
||||
$spacer-small-plus: map-get($spacers, "4") !default;
|
||||
$spacer-medium: map-get($spacers, "5") !default;
|
||||
$spacer-medium-plus: map-get($spacers, "6") !default;
|
||||
$spacer-large: map-get($spacers, "7") !default;
|
||||
|
||||
// ----------------
|
||||
// Grid layout
|
||||
// Grid layout values
|
||||
// ----------------
|
||||
|
||||
$grid-columns: 6 !default;
|
||||
|
||||
$gaps: (
|
||||
"0": 0,
|
||||
"5": 0.313rem,
|
||||
"10": 0.625rem,
|
||||
"16": 1rem,
|
||||
"20": 1.25rem,
|
||||
"36": 2.25rem,
|
||||
) !default;
|
||||
|
||||
// ----------------
|
||||
// Fonts
|
||||
// Fonts values
|
||||
// ----------------
|
||||
|
||||
// Familles de fonts
|
||||
$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
$font-family-headings: $font-family-base;
|
||||
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
// Font families
|
||||
$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;
|
||||
$line-height-base: 1.5;
|
||||
|
||||
// Font sizes
|
||||
$font-size: (
|
||||
"10": 0.625rem,
|
||||
"11": 0.6875rem,
|
||||
"12": 0.75rem,
|
||||
"14": 0.875rem,
|
||||
"16": 1rem,
|
||||
"18": 1.125rem,
|
||||
"20": 1.25rem,
|
||||
"24": 1.5rem,
|
||||
"30": 1.875rem,
|
||||
"36": 2.25rem,
|
||||
"base": 1rem,
|
||||
"inherit": inherit,
|
||||
);
|
||||
$font-size-html: 62.5%;
|
||||
$font-size-base: 1.6rem;
|
||||
|
||||
$font-size-html: 100%;
|
||||
$font-size-base: 1rem;
|
||||
|
||||
// Graisses des Fonts
|
||||
// Font weights
|
||||
$weight-light: 200;
|
||||
$weight-book: 300;
|
||||
$weight-regular: 400;
|
||||
|
|
@ -99,59 +78,45 @@ $weight-medium: 500;
|
|||
$weight-bold: 700;
|
||||
|
||||
// ----------------
|
||||
// Couleurs
|
||||
// Color values
|
||||
// ----------------
|
||||
|
||||
// Variables niveaux de gris
|
||||
// Color palette (don't use as variables except $white and $black)
|
||||
$white: #ffffff;
|
||||
$black: #000000;
|
||||
|
||||
$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-gray-1: #f7fafc;
|
||||
$color-gray-2: #abc3c2;
|
||||
$color-gray-3: #454d5d;
|
||||
$color-gray-4: #212529;
|
||||
|
||||
$color-blue-1: #0275d8;
|
||||
$color-blue-2: #04527b;
|
||||
$color-blue-3: #033651;
|
||||
|
||||
// Variables couleurs globales
|
||||
// Non agnostic colors (should be used as variables)
|
||||
|
||||
$body-color: $gray-900;
|
||||
$body-bg: $white;
|
||||
$color-alpha: $color-gray-1; // most used colors
|
||||
$color-beta: $color-gray-3;
|
||||
$color-gamma: $color-gray-4;
|
||||
|
||||
$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-delta: $color-blue-1;
|
||||
$color-epsilon: $color-blue-2;
|
||||
|
||||
$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-bg: #dff0d9;
|
||||
$success-border: #d6e9c6;
|
||||
$success: #3c763d;
|
||||
$success-hover: #275c28;
|
||||
|
||||
$info-bg: #d9edf7;
|
||||
$info-border: #bce8f1;
|
||||
$info: #0d7192;
|
||||
$info-hover: #005e7d;
|
||||
|
||||
$warning-bg: #fcf8e3;
|
||||
$warning-border: #faebcc;
|
||||
$warning: #8a6d3b;
|
||||
$warning-hover: #654f29;
|
||||
|
||||
$error-bg: #fff2f2;
|
||||
$error-border: #ebccd1;
|
||||
$error: #e3224a;
|
||||
$error-hover: #a00d10;
|
||||
$color-gradient-alpha: linear-gradient(
|
||||
to left bottom,
|
||||
$color-alpha,
|
||||
$color-beta
|
||||
);
|
||||
|
||||
$color-alternate-1: #5cb85c; // less used colors
|
||||
$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;
|
||||
|
|
@ -161,13 +126,14 @@ $link-decoration-hover: underline;
|
|||
$radius-none: 0;
|
||||
$radius-small: 0.5rem;
|
||||
$radius-medium: 1rem;
|
||||
$radius-large: 20rem;
|
||||
$radius-large: 2rem;
|
||||
$radius-circle: 50%;
|
||||
|
||||
// ----------------
|
||||
// Liste des propriétés utilitaires (note display: grid se trouve dans Grillade)
|
||||
// Utils properties list (note that display: grid is in Grillade)
|
||||
// ----------------
|
||||
$utils: ((hidden, display, none),
|
||||
$utils: (
|
||||
(hidden, display, none),
|
||||
(block, display, block),
|
||||
(inline, display, inline),
|
||||
(inline-block, display, inline-block),
|
||||
|
|
@ -188,7 +154,7 @@ $utils: ((hidden, display, none),
|
|||
(text-uppercase, text-transform, uppercase),
|
||||
(text-lowercase, text-transform, lowercase),
|
||||
(text-smaller, font-size, smaller),
|
||||
(text-larger, font-size, larger),
|
||||
(text-bigger, font-size, bigger),
|
||||
(text-left, text-align, left),
|
||||
(text-center, text-align, center),
|
||||
(text-right, text-align, right),
|
||||
|
|
@ -227,4 +193,5 @@ $utils: ((hidden, display, none),
|
|||
(align-bottom, vertical-align, bottom),
|
||||
(align-middle, vertical-align, middle),
|
||||
(item-first, order, -100),
|
||||
(item-last, order, 100)) !default;
|
||||
(item-last, order, 100)
|
||||
) !default;
|
||||
|
|
|
|||
|
|
@ -4,16 +4,15 @@
|
|||
|
||||
/*
|
||||
* 1. Switch to border-box model for all elements
|
||||
* 2. Avoid min-width: auto on flex and grid items
|
||||
* 2. Avoid min-width: auto and min-height: auto on flex and grid children
|
||||
*/
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
min-width: 0;
|
||||
/* 2 */
|
||||
box-sizing: border-box; /* 1 */
|
||||
min-width: 0; /* 2 */
|
||||
min-height: 0; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -24,12 +23,9 @@
|
|||
|
||||
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 {
|
||||
|
|
@ -37,8 +33,8 @@ body {
|
|||
font-family: $font-family-base;
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
background-color: $body-bg;
|
||||
color: $body-color;
|
||||
background-color: $white;
|
||||
color: $color-gamma;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -57,7 +53,7 @@ h5,
|
|||
.h5-like,
|
||||
h6,
|
||||
.h6-like {
|
||||
color: $gray-900;
|
||||
color: $color-gamma;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -65,14 +61,14 @@ h6,
|
|||
*/
|
||||
|
||||
a {
|
||||
color: $gray-600;
|
||||
color: $color-beta;
|
||||
text-decoration: $link-decoration;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:hover,
|
||||
a:active {
|
||||
color: $gray-900;
|
||||
color: $color-gamma;
|
||||
text-decoration: $link-decoration-hover;
|
||||
}
|
||||
|
||||
|
|
@ -82,12 +78,9 @@ 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 */
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ fieldset {
|
|||
legend {
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
padding: 0 $spacer-micro;
|
||||
padding: 0 $spacer-tiny;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
white-space: normal;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: $spacer-small $spacer-medium;
|
||||
padding: $spacer-small $spacer-small-plus;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: 0.25s;
|
||||
|
|
@ -38,12 +38,12 @@
|
|||
.btn,
|
||||
.button {
|
||||
&--small {
|
||||
padding: $spacer-micro-plus $spacer-small;
|
||||
padding: $spacer-tiny-plus $spacer-small;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
&--big {
|
||||
padding: $spacer-medium $spacer-medium;
|
||||
padding: $spacer-small-plus $spacer-medium;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
*/
|
||||
|
||||
$checkbox-color: $white;
|
||||
$checkbox-background: $primary;
|
||||
$checkbox-background: $color-alpha;
|
||||
$checkbox-size: 2rem;
|
||||
$checkbox-border-radius: 4px;
|
||||
|
||||
|
|
@ -30,7 +30,8 @@ $checkbox-border-radius: 4px;
|
|||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
vertical-align: text-bottom;
|
||||
box-shadow: inset 0 0 0 1px $primary;
|
||||
outline: 0;
|
||||
box-shadow: inset 0 0 0 1px $color-alpha;
|
||||
background-color: $checkbox-color;
|
||||
transition: background-color 0.15s;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
* radio variables (you can change them)
|
||||
*/
|
||||
|
||||
$radio-color: $primary;
|
||||
$radio-color: $color-alpha;
|
||||
$radio-background: $white;
|
||||
$radio-size: 2rem;
|
||||
$radio-border-radius: 50%;
|
||||
|
|
@ -30,7 +30,8 @@ $radio-border-radius: 50%;
|
|||
width: $radio-size;
|
||||
height: $radio-size;
|
||||
vertical-align: text-bottom;
|
||||
box-shadow: inset 0 0 0 1px $primary;
|
||||
outline: 0;
|
||||
box-shadow: inset 0 0 0 1px $color-alpha;
|
||||
background-color: $radio-background;
|
||||
transition: background-size 0.15s;
|
||||
cursor: pointer;
|
||||
|
|
@ -54,5 +55,5 @@ $radio-border-radius: 50%;
|
|||
background-size: 70% 70%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: $primary;
|
||||
background-color: $color-alpha;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
/*!
|
||||
* KNACSS Reborn: Just keep it simple!
|
||||
* @author: Alsacreations
|
||||
* v8.2 2022/01
|
||||
* v1.0.0 2020/11
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
|
||||
// IMPORTANT : Seuls les fichiers "Noyau" et "Utilitaires" sont importés par défaut. Ajoutez les fichiers de composants si nécessaires dans votre projet.
|
||||
// WARNING : Only Core and Utilities are imported by default. Just add other files if you need them.
|
||||
|
||||
// NOYAU
|
||||
// CORE
|
||||
@import "abstracts/variables-sass";
|
||||
@import "abstracts/mixins-sass";
|
||||
|
||||
|
|
@ -17,13 +17,12 @@
|
|||
@import "base/reset-print";
|
||||
@import "base/layout";
|
||||
|
||||
// UTILITAIRES
|
||||
@import "utils/utils-global";
|
||||
@import "utils/utils-font-sizes";
|
||||
@import "utils/utils-spacers";
|
||||
@import "utils/grillade";
|
||||
// UTILITY CLASSES
|
||||
// @import "utils/utils-global";
|
||||
// @import "utils/utils-spacers";
|
||||
// @import "utils/grillade";
|
||||
|
||||
// COMPOSANTS (à ajouter au besoin)
|
||||
// COMPONENTS (add them only if you need)
|
||||
// @import "components/button";
|
||||
// @import "components/burger";
|
||||
// @import "components/checkbox";
|
||||
|
|
|
|||
|
|
@ -1,19 +0,0 @@
|
|||
/* Font sizes utility classes */
|
||||
|
||||
// loop for each font-size
|
||||
@each $key, $value in $font-size {
|
||||
.text-#{$key} {
|
||||
font-size: $value;
|
||||
}
|
||||
}
|
||||
|
||||
// loop for each breakpoint
|
||||
@each $key, $value in $font-size {
|
||||
@each $bp, $bpv in $breakpoints {
|
||||
@media (min-width: #{$bpv}) {
|
||||
.#{$bp}\:text-#{$key} {
|
||||
font-size: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -6,10 +6,8 @@
|
|||
.#{$class} {
|
||||
#{$prop}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
// loop for each breakpoint
|
||||
@each $class, $prop, $value in $utils {
|
||||
// loop for each breakpoint
|
||||
@each $bp, $bpv in $breakpoints {
|
||||
@media (min-width: #{$bpv}) {
|
||||
.#{$bp}\:#{$class} {
|
||||
|
|
@ -17,6 +15,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// multi-properties utils
|
||||
|
|
|
|||
|
|
@ -1,37 +1,39 @@
|
|||
/* -------------------------------------------------- */
|
||||
/* ==Grillade : système de micro-grille de KNACSS */
|
||||
/* ------------------------------------------------ */
|
||||
// Grillade est directement inspiré tailwindcss.com et de ses classes utilitaires
|
||||
/* --------------------------------------- */
|
||||
/* ==Grillade : ultra light Grid Layout */
|
||||
/* --------------------------------------- */
|
||||
// Grillade is heavily inspired by tailwindcss.com Grid utility classes
|
||||
|
||||
// Les variables ci-dessous ne sont appliquées que si elles n'ont pas été renseignées
|
||||
// dans le fichiers de variables de KNACSS.
|
||||
|
||||
@if variable_exists(grid-columns) {
|
||||
$grid-columns: $grid-columns !global;
|
||||
} @else {
|
||||
$grid-columns: 6 !global;
|
||||
// use these variables only for a standalone Grillade
|
||||
// in KNACSS, you shall modify variables file instead
|
||||
$grid-columns: 6 !default;
|
||||
|
||||
@if variable_exists(spacers) {
|
||||
$spacers: $spacers !global;
|
||||
}
|
||||
|
||||
@if variable_exists(gaps) {
|
||||
$gaps: $gaps !global;
|
||||
} @else {
|
||||
$gaps: (
|
||||
"0": 0,
|
||||
"5": 0.313rem,
|
||||
"10": 0.625rem,
|
||||
"16": 1rem,
|
||||
"20": 1.25rem,
|
||||
"36": 2.25rem,
|
||||
@else {
|
||||
$spacers : (
|
||||
'0' : 0,
|
||||
'1' : .5rem,
|
||||
'2' : .75rem,
|
||||
'3' : 1rem,
|
||||
'4' : 1.5rem,
|
||||
'5' : 2rem,
|
||||
'6' : 3rem,
|
||||
'7' : 5rem,
|
||||
'auto' : auto
|
||||
) !global;
|
||||
}
|
||||
|
||||
@if variable_exists(breakpoints) {
|
||||
$breakpoints: $breakpoints !global;
|
||||
} @else {
|
||||
$breakpoints: (
|
||||
}
|
||||
@else {
|
||||
$breakpoints : (
|
||||
sm: 576px,
|
||||
md: 992px,
|
||||
lg: 1330px,
|
||||
md: 768px,
|
||||
lg: 1024px,
|
||||
xl: 1330px
|
||||
) !global;
|
||||
}
|
||||
|
||||
|
|
@ -47,26 +49,26 @@
|
|||
}
|
||||
}
|
||||
|
||||
/* grid-template-columns initialisation */
|
||||
/* grid-template-columns classes */
|
||||
@for $i from 1 through $grid-columns {
|
||||
|
||||
.grid-cols-#{$i} {
|
||||
grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@each $bp, $bpv in $breakpoints {
|
||||
|
||||
/* grid-template-columns au sein des breakpoints */
|
||||
@each $bp, $bpv in $breakpoints {
|
||||
@media (min-width: #{$bpv}) {
|
||||
@for $i from 1 through $grid-columns {
|
||||
.#{$bp}\:grid-cols-#{$i} {
|
||||
grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* gap initialisation */
|
||||
@each $key, $value in $gaps {
|
||||
/* gap classes */
|
||||
@each $key, $value in $spacers {
|
||||
|
||||
.gap-#{$key} {
|
||||
gap: $value;
|
||||
}
|
||||
|
|
@ -76,12 +78,10 @@
|
|||
.gap-y-#{$key} {
|
||||
row-gap: $value;
|
||||
}
|
||||
}
|
||||
|
||||
/* gap au sein des breakpoints */
|
||||
@each $bp, $bpv in $breakpoints {
|
||||
@each $bp, $bpv in $breakpoints {
|
||||
|
||||
@media (min-width: #{$bpv}) {
|
||||
@each $key, $value in $gaps {
|
||||
.#{$bp}\:gap-#{$key} {
|
||||
gap: $value;
|
||||
}
|
||||
|
|
@ -93,10 +93,12 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* grid-items initialisation */
|
||||
/* grid-items classes */
|
||||
@for $i from 1 through $grid-columns {
|
||||
|
||||
.col-start-#{$i} {
|
||||
grid-column-start: #{$i};
|
||||
}
|
||||
|
|
@ -118,14 +120,11 @@
|
|||
.row-span-#{$i} {
|
||||
grid-row: span #{$i} / span #{$i};
|
||||
}
|
||||
}
|
||||
|
||||
/* grid-items au sein des breakpoints */
|
||||
@each $bp, $bpv in $breakpoints {
|
||||
@media (min-width: #{$bpv}) {
|
||||
@for $i from 1 through $grid-columns {
|
||||
// loop for each breakpoint
|
||||
@each $bp, $bpv in $breakpoints {
|
||||
|
||||
@media (min-width: #{$bpv}) {
|
||||
.#{$bp}\:col-start-#{$i} {
|
||||
grid-column-start: #{$i};
|
||||
}
|
||||
|
|
@ -149,4 +148,5 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue