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

Transfert des fichiers Reborn vers branche v8

Browse source
This commit is contained in:
Raphaël Goetter 2021-01-25 12:28:12 +01:00
parent f14b1294cf
commit e3e57665a0
50 changed files with 2248 additions and 14990 deletions
Download patch file Download diff file Expand all files Collapse all files

65
sass/utils/_utils-global.scss Normal file
View file

@ -0,0 +1,65 @@
/*
* Global utility classes
*/
@each $class, $prop, $value in $utils {
.#{$class} {
#{$prop}: #{$value};
}
// loop for each breakpoint
@each $bp, $bpv in $breakpoints {
@media (min-width: #{$bpv}) {
.#{$bp}\:#{$class} {
#{$prop}: #{$value};
}
}
}
}
// multi-properties utils
.is-unstyled {
list-style: none;
padding-left: 0;
}
.is-disabled,
[disabled] {
opacity: 0.6;
cursor: not-allowed !important;
filter: grayscale(1);
}
.text-normal {
font-weight: normal;
font-style: normal;
text-transform: none;
}
// loop for each breakpoint
@each $bp, $bpv in $breakpoints {
@media (min-width: #{$bpv}) {
.#{$bp}\:visually-hidden {
position: absolute !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
}
.#{$bp}\:is-unstyled {
list-style: none;
padding-left: 0;
}
.#{$bp}\:is-disabled {
opacity: 0.6;
cursor: not-allowed !important;
filter: grayscale(1);
}
.#{$bp}\:text-normal {
font-weight: normal;
font-style: normal;
text-transform: none;
}
}
}

134
sass/utils/_utils-spacers.scss Normal file
View file

@ -0,0 +1,134 @@
/* Spacers utility classes */
// loop for each spacer
@each $key,
$value in $spacers {
.p-#{$key} {
padding: $value;
}
.pt-#{$key} {
padding-top: $value;
}
.pr-#{$key} {
padding-right: $value;
}
.pb-#{$key} {
padding-bottom: $value;
}
.pl-#{$key} {
padding-left: $value;
}
.px-#{$key} {
padding-left: $value;
padding-right: $value;
}
.py-#{$key} {
padding-top: $value;
padding-bottom: $value;
}
.m-#{$key} {
margin: $value;
}
.mt-#{$key} {
margin-top: $value;
}
.mr-#{$key} {
margin-right: $value;
}
.mb-#{$key} {
margin-bottom: $value;
}
.ml-#{$key} {
margin-left: $value;
}
.mx-#{$key} {
margin-left: $value;
margin-right: $value;
}
.my-#{$key} {
margin-top: $value;
margin-bottom: $value;
}
// loop for each breakpoint
@each $bp,
$bpv in $breakpoints {
@media (min-width: #{$bpv}) {
.#{$bp}\:p-#{$key} {
padding: $value;
}
.#{$bp}\:pt-#{$key} {
padding-top: $value;
}
.#{$bp}\:pr-#{$key} {
padding-right: $value;
}
.#{$bp}\:pb-#{$key} {
padding-bottom: $value;
}
.#{$bp}\:pl-#{$key} {
padding-left: $value;
}
.#{$bp}\:px-#{$key} {
padding-left: $value;
padding-right: $value;
}
.#{$bp}\:py-#{$key} {
padding-top: $value;
padding-bottom: $value;
}
.#{$bp}\:m-#{$key} {
margin: $value;
}
.#{$bp}\:mt-#{$key} {
margin-top: $value;
}
.#{$bp}\:mr-#{$key} {
margin-right: $value;
}
.#{$bp}\:mb-#{$key} {
margin-bottom: $value;
}
.#{$bp}\:ml-#{$key} {
margin-left: $value;
}
.#{$bp}\:mx-#{$key} {
margin-left: $value;
margin-right: $value;
}
.#{$bp}\:my-#{$key} {
margin-top: $value;
margin-bottom: $value;
}
}
}
}

152
sass/utils/grillade.scss Normal file
View file

@ -0,0 +1,152 @@
/* --------------------------------------- */
/* ==Grillade : ultra light Grid Layout */
/* --------------------------------------- */
// Grillade is heavily inspired by tailwindcss.com Grid utility classes
// 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;
}
@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 : (
sm: 576px,
md: 768px,
lg: 1024px,
xl: 1330px
) !global;
}
.grid {
display: grid;
}
// grid class for each breakpoint
@each $bp, $bpv in $breakpoints {
@media (min-width: #{$bpv}) {
.#{$bp}\:grid {
display: grid;
}
}
}
/* 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 {
@media (min-width: #{$bpv}) {
.#{$bp}\:grid-cols-#{$i} {
grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
}
}
}
}
/* gap classes */
@each $key, $value in $spacers {
.gap-#{$key} {
gap: $value;
}
.gap-x-#{$key} {
column-gap: $value;
}
.gap-y-#{$key} {
row-gap: $value;
}
@each $bp, $bpv in $breakpoints {
@media (min-width: #{$bpv}) {
.#{$bp}\:gap-#{$key} {
gap: $value;
}
.#{$bp}\:gap-x-#{$key} {
column-gap: $value;
}
.#{$bp}\:gap-y-#{$key} {
row-gap: $value;
}
}
}
}
/* grid-items classes */
@for $i from 1 through $grid-columns {
.col-start-#{$i} {
grid-column-start: #{$i};
}
.col-end-#{$i} {
grid-column-end: #{$i};
}
.col-span-#{$i} {
grid-column: span #{$i} / span #{$i};
}
.col-span-full {
grid-column: 1 / -1;
}
.row-start-#{$i} {
grid-row-start: #{$i};
}
.row-end-#{$i} {
grid-row-end: #{$i};
}
.row-span-#{$i} {
grid-row: span #{$i} / span #{$i};
}
// loop for each breakpoint
@each $bp, $bpv in $breakpoints {
@media (min-width: #{$bpv}) {
.#{$bp}\:col-start-#{$i} {
grid-column-start: #{$i};
}
.#{$bp}\:col-end-#{$i} {
grid-column-end: #{$i};
}
.#{$bp}\:col-span-#{$i} {
grid-column: span #{$i} / span #{$i};
}
.#{$bp}\:col-span-full {
grid-column: 1 / -1;
}
.#{$bp}\:row-start-#{$i} {
grid-row-start: #{$i};
}
.#{$bp}\:row-end-#{$i} {
grid-row-end: #{$i};
}
.#{$bp}\:row-span-#{$i} {
grid-row: span #{$i} / span #{$i};
}
}
}
}