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

ajout des utilitaires font-sizes

Browse source
This commit is contained in:
Raphaël Goetter 2021-03-11 08:20:15 +01:00
parent 4993abacca
commit ca247b2a5d
5 changed files with 373 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2502,6 +2502,343 @@ template {
} }
} }
/* Font sizes utility classes */
.text-10 {
font-size: 0.625rem;
}
.text-11 {
font-size: 0.6875rem;
}
.text-12 {
font-size: 0.75rem;
}
.text-14 {
font-size: 0.875rem;
}
.text-16 {
font-size: 1rem;
}
.text-18 {
font-size: 1.125rem;
}
.text-20 {
font-size: 1.25rem;
}
.text-24 {
font-size: 1.5rem;
}
.text-30 {
font-size: 1.875rem;
}
.text-36 {
font-size: 2.25rem;
}
.text-base {
font-size: 1rem;
}
.text-inherit {
font-size: "inherit";
}
@media (min-width: 576px) {
.sm\:text-10 {
font-size: 0.625rem;
}
}
@media (min-width: 768px) {
.md\:text-10 {
font-size: 0.625rem;
}
}
@media (min-width: 1024px) {
.lg\:text-10 {
font-size: 0.625rem;
}
}
@media (min-width: 1330px) {
.xl\:text-10 {
font-size: 0.625rem;
}
}
@media (min-width: 576px) {
.sm\:text-11 {
font-size: 0.6875rem;
}
}
@media (min-width: 768px) {
.md\:text-11 {
font-size: 0.6875rem;
}
}
@media (min-width: 1024px) {
.lg\:text-11 {
font-size: 0.6875rem;
}
}
@media (min-width: 1330px) {
.xl\:text-11 {
font-size: 0.6875rem;
}
}
@media (min-width: 576px) {
.sm\:text-12 {
font-size: 0.75rem;
}
}
@media (min-width: 768px) {
.md\:text-12 {
font-size: 0.75rem;
}
}
@media (min-width: 1024px) {
.lg\:text-12 {
font-size: 0.75rem;
}
}
@media (min-width: 1330px) {
.xl\:text-12 {
font-size: 0.75rem;
}
}
@media (min-width: 576px) {
.sm\:text-14 {
font-size: 0.875rem;
}
}
@media (min-width: 768px) {
.md\:text-14 {
font-size: 0.875rem;
}
}
@media (min-width: 1024px) {
.lg\:text-14 {
font-size: 0.875rem;
}
}
@media (min-width: 1330px) {
.xl\:text-14 {
font-size: 0.875rem;
}
}
@media (min-width: 576px) {
.sm\:text-16 {
font-size: 1rem;
}
}
@media (min-width: 768px) {
.md\:text-16 {
font-size: 1rem;
}
}
@media (min-width: 1024px) {
.lg\:text-16 {
font-size: 1rem;
}
}
@media (min-width: 1330px) {
.xl\:text-16 {
font-size: 1rem;
}
}
@media (min-width: 576px) {
.sm\:text-18 {
font-size: 1.125rem;
}
}
@media (min-width: 768px) {
.md\:text-18 {
font-size: 1.125rem;
}
}
@media (min-width: 1024px) {
.lg\:text-18 {
font-size: 1.125rem;
}
}
@media (min-width: 1330px) {
.xl\:text-18 {
font-size: 1.125rem;
}
}
@media (min-width: 576px) {
.sm\:text-20 {
font-size: 1.25rem;
}
}
@media (min-width: 768px) {
.md\:text-20 {
font-size: 1.25rem;
}
}
@media (min-width: 1024px) {
.lg\:text-20 {
font-size: 1.25rem;
}
}
@media (min-width: 1330px) {
.xl\:text-20 {
font-size: 1.25rem;
}
}
@media (min-width: 576px) {
.sm\:text-24 {
font-size: 1.5rem;
}
}
@media (min-width: 768px) {
.md\:text-24 {
font-size: 1.5rem;
}
}
@media (min-width: 1024px) {
.lg\:text-24 {
font-size: 1.5rem;
}
}
@media (min-width: 1330px) {
.xl\:text-24 {
font-size: 1.5rem;
}
}
@media (min-width: 576px) {
.sm\:text-30 {
font-size: 1.875rem;
}
}
@media (min-width: 768px) {
.md\:text-30 {
font-size: 1.875rem;
}
}
@media (min-width: 1024px) {
.lg\:text-30 {
font-size: 1.875rem;
}
}
@media (min-width: 1330px) {
.xl\:text-30 {
font-size: 1.875rem;
}
}
@media (min-width: 576px) {
.sm\:text-36 {
font-size: 2.25rem;
}
}
@media (min-width: 768px) {
.md\:text-36 {
font-size: 2.25rem;
}
}
@media (min-width: 1024px) {
.lg\:text-36 {
font-size: 2.25rem;
}
}
@media (min-width: 1330px) {
.xl\:text-36 {
font-size: 2.25rem;
}
}
@media (min-width: 576px) {
.sm\:text-base {
font-size: 1rem;
}
}
@media (min-width: 768px) {
.md\:text-base {
font-size: 1rem;
}
}
@media (min-width: 1024px) {
.lg\:text-base {
font-size: 1rem;
}
}
@media (min-width: 1330px) {
.xl\:text-base {
font-size: 1rem;
}
}
@media (min-width: 576px) {
.sm\:text-inherit {
font-size: "inherit";
}
}
@media (min-width: 768px) {
.md\:text-inherit {
font-size: "inherit";
}
}
@media (min-width: 1024px) {
.lg\:text-inherit {
font-size: "inherit";
}
}
@media (min-width: 1330px) {
.xl\:text-inherit {
font-size: "inherit";
}
}
/* Spacers utility classes */ /* Spacers utility classes */
.p-0 { .p-0 {
padding: 0; padding: 0;

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

File diff suppressed because one or more lines are too long

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

@ -67,6 +67,21 @@ $font-family-monospace: consolas, courier, monospace;
$line-height-base: 1.5; $line-height-base: 1.5;
// Font sizes // 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-html: 62.5%;
$font-size-base: 1.6rem; $font-size-base: 1.6rem;

1
sass/knacss.scss
View file

@ -19,6 +19,7 @@
// UTILITY CLASSES // UTILITY CLASSES
@import "utils/utils-global"; @import "utils/utils-global";
@import "utils/utils-font-sizes";
@import "utils/utils-spacers"; @import "utils/utils-spacers";
@import "utils/grillade"; @import "utils/grillade";

19
sass/utils/_utils-font-sizes.scss Normal file
View 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;
}
}
}
}