Compare commits
16 commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
87b3d7c784 | ||
|
|
a6163e34fc | ||
|
|
cd2b9e87da | ||
|
|
fc749045b9 | ||
|
1c392fb2d8 | ||
|
|
dc2331ded2 | ||
|
|
6e13e8bc48 | ||
|
|
d9833fe12c | ||
|
|
59f02b6c57 | ||
|
|
8e95e4cdd9 | ||
|
|
cddc2d472a | ||
|
|
4d8ce9b36e | ||
|
|
b9f1adc09a | ||
|
|
ad3b8c2081 | ||
|
|
ca247b2a5d | ||
|
|
4993abacca |
17 changed files with 2587 additions and 3284 deletions
39
README.md
39
README.md
|
|
@ -1,12 +1,8 @@
|
|||
# KNACSS
|
||||
|
||||
<https://www.knacss.com/>
|
||||
**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.**
|
||||
|
||||
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).
|
||||
|
||||
**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)
|
||||
## Documentation version v8 (v8 = Reborn)
|
||||
|
||||
- Site web de présentation de KNACSS Reborn : <https://www.knacss.com/>
|
||||
- [**Documentation KNACSS Reborn**](https://www.knacss.com/doc.html)
|
||||
|
|
@ -16,34 +12,3 @@ KNACSS, c'est une sorte de feuille de style CSS "reset" sur-vitaminée qui perme
|
|||
- [**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)
|
||||
|
||||
## 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,6 +1,11 @@
|
|||
# Changelog
|
||||
|
||||
- 5 mars : les classes utilitaires font à présent partie du Core
|
||||
- 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
|
||||
|
|
@ -92,7 +97,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 :
|
||||
|
|
|
|||
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,7 +4,6 @@ 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.0.3",
|
||||
"version": "8.2.1",
|
||||
"homepage": "http://www.knacss.com/",
|
||||
"bugs": "https://github.com/alsacreations/KNACSS/issues",
|
||||
"author": "Raphaël GOETTER, Alsacreations (http://www.alsacreations.fr)",
|
||||
|
|
@ -32,7 +32,6 @@
|
|||
"dependencies": {
|
||||
"autoprefixer": "^9.7.1",
|
||||
"postcss-combine-media-query": "^1.0.1",
|
||||
"cssnano": "^4.1.10",
|
||||
"gulp-rename": "^2.0.0"
|
||||
"cssnano": "^4.1.10"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,22 +2,30 @@
|
|||
// ex. @include respond-to("medium-up") {...}
|
||||
|
||||
$bp-aliases: (
|
||||
'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})
|
||||
);
|
||||
"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},
|
||||
),
|
||||
);
|
||||
|
||||
// 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;
|
||||
|
|
@ -29,4 +37,4 @@ $bp-aliases: (
|
|||
@warn "Unfortunately, no value could be retrieved from `#{$name}`. "
|
||||
+"Please make sure it is defined in `$bp-aliases` map.";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,76 +1,97 @@
|
|||
// ----------------
|
||||
// Sass Config and variables
|
||||
// Config Sass et variables
|
||||
// ----------------
|
||||
|
||||
// ----------------
|
||||
// Breakpoints values
|
||||
// Valeurs de Breakpoints
|
||||
// ----------------
|
||||
|
||||
// Hypothèse : smartphone portrait/paysage < 576px < gros smartphone paysage + tablette portrait < 992px < tablette paysage < 1330px < laptop et plus
|
||||
$breakpoints: (
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 1024px,
|
||||
xl: 1330px,
|
||||
md: 992px,
|
||||
lg: 1400px,
|
||||
) !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 values
|
||||
// Spacers
|
||||
// ----------------
|
||||
|
||||
$spacer: 1rem;
|
||||
$spacers: (
|
||||
"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
|
||||
"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, "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;
|
||||
$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 values
|
||||
// Grid layout
|
||||
// ----------------
|
||||
|
||||
$grid-columns: 6 !default;
|
||||
|
||||
$gaps: (
|
||||
"0": 0,
|
||||
"5": 0.313rem,
|
||||
"10": 0.625rem,
|
||||
"16": 1rem,
|
||||
"20": 1.25rem,
|
||||
"36": 2.25rem,
|
||||
) !default;
|
||||
|
||||
// ----------------
|
||||
// Fonts values
|
||||
// Fonts
|
||||
// ----------------
|
||||
|
||||
// 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;
|
||||
// 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;
|
||||
$line-height-base: 1.5;
|
||||
|
||||
// Font sizes
|
||||
$font-size-html: 62.5%;
|
||||
$font-size-base: 1.6rem;
|
||||
$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 weights
|
||||
$font-size-html: 100%;
|
||||
$font-size-base: 1rem;
|
||||
|
||||
// Graisses des Fonts
|
||||
$weight-light: 200;
|
||||
$weight-book: 300;
|
||||
$weight-regular: 400;
|
||||
|
|
@ -78,45 +99,59 @@ $weight-medium: 500;
|
|||
$weight-bold: 700;
|
||||
|
||||
// ----------------
|
||||
// Color values
|
||||
// Couleurs
|
||||
// ----------------
|
||||
|
||||
// Color palette (don't use as variables except $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;
|
||||
|
||||
// Non agnostic colors (should be used as variables)
|
||||
// Variables couleurs globales
|
||||
|
||||
$color-alpha: $color-gray-1; // most used colors
|
||||
$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-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-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;
|
||||
|
|
@ -126,14 +161,13 @@ $link-decoration-hover: underline;
|
|||
$radius-none: 0;
|
||||
$radius-small: 0.5rem;
|
||||
$radius-medium: 1rem;
|
||||
$radius-large: 2rem;
|
||||
$radius-large: 20rem;
|
||||
$radius-circle: 50%;
|
||||
|
||||
// ----------------
|
||||
// Utils properties list (note that display: grid is in Grillade)
|
||||
// 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),
|
||||
|
|
@ -154,7 +188,7 @@ $utils: (
|
|||
(text-uppercase, text-transform, uppercase),
|
||||
(text-lowercase, text-transform, lowercase),
|
||||
(text-smaller, font-size, smaller),
|
||||
(text-bigger, font-size, bigger),
|
||||
(text-larger, font-size, larger),
|
||||
(text-left, text-align, left),
|
||||
(text-center, text-align, center),
|
||||
(text-right, text-align, right),
|
||||
|
|
@ -193,5 +227,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;
|
||||
|
|
@ -4,15 +4,16 @@
|
|||
|
||||
/*
|
||||
* 1. Switch to border-box model for all elements
|
||||
* 2. Avoid min-width: auto and min-height: auto on flex and grid children
|
||||
* 2. Avoid min-width: auto on flex and grid items
|
||||
*/
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box; /* 1 */
|
||||
min-width: 0; /* 2 */
|
||||
min-height: 0; /* 2 */
|
||||
box-sizing: border-box;
|
||||
/* 1 */
|
||||
min-width: 0;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -23,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 {
|
||||
|
|
@ -33,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;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -53,7 +57,7 @@ h5,
|
|||
.h5-like,
|
||||
h6,
|
||||
.h6-like {
|
||||
color: $color-gamma;
|
||||
color: $gray-900;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -61,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;
|
||||
}
|
||||
|
||||
|
|
@ -78,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 */
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -247,4 +254,4 @@ table {
|
|||
border-collapse: collapse;
|
||||
vertical-align: top;
|
||||
margin-bottom: $spacer-medium;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
*/
|
||||
|
||||
$checkbox-color: $white;
|
||||
$checkbox-background: $color-alpha;
|
||||
$checkbox-background: $primary;
|
||||
$checkbox-size: 2rem;
|
||||
$checkbox-border-radius: 4px;
|
||||
|
||||
|
|
@ -30,8 +30,7 @@ $checkbox-border-radius: 4px;
|
|||
width: $checkbox-size;
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
@ -30,8 +30,7 @@ $radio-border-radius: 50%;
|
|||
width: $radio-size;
|
||||
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;
|
||||
|
|
@ -55,5 +54,5 @@ $radio-border-radius: 50%;
|
|||
background-size: 70% 70%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: $color-alpha;
|
||||
background-color: $primary;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
/*!
|
||||
* KNACSS Reborn: Just keep it simple!
|
||||
* @author: Alsacreations
|
||||
* v8.0.3 2021/05
|
||||
* v8.2 2022/01
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
|
||||
// WARNING : Only Core and Utilities are imported by default. Just add other files if you need them.
|
||||
// IMPORTANT : Seuls les fichiers "Noyau" et "Utilitaires" sont importés par défaut. Ajoutez les fichiers de composants si nécessaires dans votre projet.
|
||||
|
||||
// CORE
|
||||
// NOYAU
|
||||
@import "abstracts/variables-sass";
|
||||
@import "abstracts/mixins-sass";
|
||||
|
||||
|
|
@ -17,15 +17,16 @@
|
|||
@import "base/reset-print";
|
||||
@import "base/layout";
|
||||
|
||||
// UTILITY CLASSES
|
||||
// UTILITAIRES
|
||||
@import "utils/utils-global";
|
||||
@import "utils/utils-font-sizes";
|
||||
@import "utils/utils-spacers";
|
||||
@import "utils/grillade";
|
||||
|
||||
// COMPONENTS (add them only if you need)
|
||||
// COMPOSANTS (à ajouter au besoin)
|
||||
// @import "components/button";
|
||||
// @import "components/burger";
|
||||
// @import "components/checkbox";
|
||||
// @import "components/radio";
|
||||
// @import "components/select";
|
||||
// @import "components/quote";
|
||||
// @import "components/quote";
|
||||
19
sass/utils/_utils-font-sizes.scss
Normal file
19
sass/utils/_utils-font-sizes.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
/* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +1,37 @@
|
|||
/* --------------------------------------- */
|
||||
/* ==Grillade : ultra light Grid Layout */
|
||||
/* --------------------------------------- */
|
||||
// Grillade is heavily inspired by tailwindcss.com Grid utility classes
|
||||
/* -------------------------------------------------- */
|
||||
/* ==Grillade : système de micro-grille de KNACSS */
|
||||
/* ------------------------------------------------ */
|
||||
// Grillade est directement inspiré tailwindcss.com et de ses classes utilitaires
|
||||
|
||||
// Les variables ci-dessous ne sont appliquées que si elles n'ont pas été renseignées
|
||||
// dans le fichiers de variables de KNACSS.
|
||||
|
||||
// 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(grid-columns) {
|
||||
$grid-columns: $grid-columns !global;
|
||||
} @else {
|
||||
$grid-columns: 6 !global;
|
||||
}
|
||||
@else {
|
||||
$spacers : (
|
||||
'0' : 0,
|
||||
'1' : .5rem,
|
||||
'2' : .75rem,
|
||||
'3' : 1rem,
|
||||
'4' : 1.5rem,
|
||||
'5' : 2rem,
|
||||
'6' : 3rem,
|
||||
'7' : 5rem,
|
||||
'auto' : auto
|
||||
|
||||
@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,
|
||||
) !global;
|
||||
}
|
||||
|
||||
@if variable_exists(breakpoints) {
|
||||
$breakpoints: $breakpoints !global;
|
||||
}
|
||||
@else {
|
||||
$breakpoints : (
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 1024px,
|
||||
xl: 1330px
|
||||
} @else {
|
||||
$breakpoints: (
|
||||
sm: 576px,
|
||||
md: 992px,
|
||||
lg: 1330px,
|
||||
) !global;
|
||||
}
|
||||
|
||||
|
|
@ -42,33 +40,33 @@ $grid-columns: 6 !default;
|
|||
}
|
||||
// grid class for each breakpoint
|
||||
@each $bp, $bpv in $breakpoints {
|
||||
@media (min-width: #{$bpv}) {
|
||||
@media (min-width: #{$bpv}) {
|
||||
.#{$bp}\:grid {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* grid-template-columns classes */
|
||||
/* grid-template-columns initialisation */
|
||||
@for $i from 1 through $grid-columns {
|
||||
|
||||
.grid-cols-#{$i} {
|
||||
grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
|
||||
}
|
||||
@each $bp, $bpv in $breakpoints {
|
||||
|
||||
@media (min-width: #{$bpv}) {
|
||||
}
|
||||
|
||||
/* 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 classes */
|
||||
@each $key, $value in $spacers {
|
||||
|
||||
/* gap initialisation */
|
||||
@each $key, $value in $gaps {
|
||||
.gap-#{$key} {
|
||||
gap: $value;
|
||||
}
|
||||
|
|
@ -78,10 +76,12 @@ $grid-columns: 6 !default;
|
|||
.gap-y-#{$key} {
|
||||
row-gap: $value;
|
||||
}
|
||||
}
|
||||
|
||||
@each $bp, $bpv in $breakpoints {
|
||||
|
||||
@media (min-width: #{$bpv}) {
|
||||
/* gap au sein des breakpoints */
|
||||
@each $bp, $bpv in $breakpoints {
|
||||
@media (min-width: #{$bpv}) {
|
||||
@each $key, $value in $gaps {
|
||||
.#{$bp}\:gap-#{$key} {
|
||||
gap: $value;
|
||||
}
|
||||
|
|
@ -93,12 +93,10 @@ $grid-columns: 6 !default;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* grid-items classes */
|
||||
/* grid-items initialisation */
|
||||
@for $i from 1 through $grid-columns {
|
||||
|
||||
.col-start-#{$i} {
|
||||
grid-column-start: #{$i};
|
||||
}
|
||||
|
|
@ -120,11 +118,14 @@ $grid-columns: 6 !default;
|
|||
.row-span-#{$i} {
|
||||
grid-row: span #{$i} / span #{$i};
|
||||
}
|
||||
|
||||
// loop for each breakpoint
|
||||
@each $bp, $bpv in $breakpoints {
|
||||
|
||||
@media (min-width: #{$bpv}) {
|
||||
}
|
||||
|
||||
/* 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
|
||||
|
||||
.#{$bp}\:col-start-#{$i} {
|
||||
grid-column-start: #{$i};
|
||||
}
|
||||
|
|
@ -148,5 +149,4 @@ $grid-columns: 6 !default;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue