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

32
sass/abstracts/_mixins-sass.scss Normal file
View file

@ -0,0 +1,32 @@
// Respond-to mixin
// 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})
);
// 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;
}
}
// If the key doesn't exist in the map
@else {
@warn "Unfortunately, no value could be retrieved from `#{$name}`. "
+"Please make sure it is defined in `$bp-aliases` map.";
}
}

70
sass/abstracts/_mixins.scss
View file

@ -1,70 +0,0 @@
// Visually-hidden mixin
@mixin 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;
}
// font-size Mixin
// compiles to font-size mobile + font-size desktop on small-plus devices
// ex. h2 { @include font-size(h2);}
@mixin font-size($elem) {
$q: map-get($font-sizes, $elem);
$mob: map-get($q, "mobile");
$desk: map-get($q, "desktop");
font-size: $mob;
@include respond-to("small-up") {
font-size: $desk;
}
}
// Grid Mixin
// arguments are : columns number, gutter, min-breakpoint
// ex. .ingrid { @include grid(4, 1rem, 640px); }
@mixin grid($number:1, $gutter:0, $breakpoint:0) {
@supports (display: grid) {
@media (min-width: $breakpoint) {
display: grid;
grid-template-columns: repeat($number, 1fr);
grid-gap: $gutter;
}
}
}
// Additionnal "utility" breakpoints aliases
// ex. @include respond-to("medium-up") {...}
$bp-aliases: (
'tiny' : (max-width: #{$tiny - 1}),
'small' : (max-width: #{$small - 1}),
'medium' : (max-width: #{$medium - 1}),
'large' : (max-width: #{$large - 1}),
'extra-large' : (max-width: #{$extra-large - 1}),
'tiny-up' : (min-width: #{$tiny}),
'small-up' : (min-width: #{$small}),
'medium-up' : (min-width: #{$medium}),
'large-up' : (min-width: #{$large}),
'extra-large-up' : (min-width: #{$extra-large}),
'retina' : (min-resolution: 2dppx)
);
// 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;
}
}
// If the key doesn't exist in the map
@else {
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+ "Please make sure it is defined in `$breakpoints` map.";
}
}

197
sass/abstracts/_variables-sass.scss Normal file
View file

@ -0,0 +1,197 @@
// ----------------
// Sass Config and variables
// ----------------
// ----------------
// Breakpoints values
// ----------------
$breakpoints: (
sm: 576px,
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 values
// ----------------
$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
"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;
// ----------------
// Grid layout values
// ----------------
$grid-columns: 6 !default;
// ----------------
// Fonts values
// ----------------
// 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-html: 62.5%;
$font-size-base: 1.6rem;
// Font weights
$weight-light: 200;
$weight-book: 300;
$weight-regular: 400;
$weight-medium: 500;
$weight-bold: 700;
// ----------------
// Color values
// ----------------
// Color palette (don't use as variables except $white and $black)
$white: #ffffff;
$black: #000000;
$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;
// Non agnostic colors (should be used as variables)
$color-alpha: $color-gray-1; // most used colors
$color-beta: $color-gray-3;
$color-gamma: $color-gray-4;
$color-delta: $color-blue-1;
$color-epsilon: $color-blue-2;
$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;
$link-decoration-hover: underline;
// Border radius
$radius-none: 0;
$radius-small: 0.5rem;
$radius-medium: 1rem;
$radius-large: 2rem;
$radius-circle: 50%;
// ----------------
// Utils properties list (note that display: grid is in Grillade)
// ----------------
$utils: (
(hidden, display, none),
(block, display, block),
(inline, display, inline),
(inline-block, display, inline-block),
(flex, display, flex),
(flex-row, flex-direction, row),
(flex-col, flex-direction, column),
(flex-wrap, flex-wrap, wrap),
(flex-no-wrap, flex-wrap, nowrap),
(flex-shrink, flex-shrink, 1),
(flex-no-shrink, flex-shrink, 0),
(flex-grow, flex-grow, 1),
(flex-no-grow, flex-grow, 0),
(float-left, float, left),
(float-right, float, right),
(float-none, float, none),
(text-bold, font-weight, bold),
(text-italic, font-style, italic),
(text-uppercase, text-transform, uppercase),
(text-lowercase, text-transform, lowercase),
(text-smaller, font-size, smaller),
(text-bigger, font-size, bigger),
(text-left, text-align, left),
(text-center, text-align, center),
(text-right, text-align, right),
(text-justify, text-align, justify),
(text-wrap, overflow-wrap, break-word),
(justify-start, justify-content, flex-start),
(justify-end, justify-content, flex-end),
(justify-center, justify-content, center),
(justify-between, justify-content, space-between),
(justify-around, justify-content, space-around),
(justify-evenly, justify-content, space-evenly),
(justify-items-start, justify-items, start),
(justify-items-end, justify-items, end),
(justify-items-center, justify-items, center),
(align-start, align-content, start),
(align-end, align-content, end),
(align-center, align-content, center),
(align-between, align-content, space-between),
(align-around, align-content, space-around),
(align-evenly, align-content, space-evenly),
(align-items-start, align-items, flex-start),
(align-items-end, align-items, flex-end),
(align-items-center, align-items, center),
(place-center, place-content, center),
(justify-self-auto, justify-self, auto),
(justify-self-start, justify-self, start),
(justify-self-end, justify-self, end),
(justify-self-center, justify-self, center),
(justify-self-stretch, justify-self, stretch),
(align-self-auto, align-self, auto),
(align-self-start, align-self, flex-start),
(align-self-end, align-self, flex-end),
(align-self-center, align-self, center),
(align-self-stretch, align-self, stretch),
(align-top, vertical-align, top),
(align-bottom, vertical-align, bottom),
(align-middle, vertical-align, middle),
(item-first, order, -100),
(item-last, order, 100)
) !default;

230
sass/abstracts/_variables.scss
View file

@ -1,230 +0,0 @@
// Config file and project variables
// ----------------
// Breakpoints zone
// ----------------
// Warning: you should use your own values, regardless of the devices
// Best practice is Mobile First: (min-width: $breakpoint)
$tiny : 480px !default; // or 'em' if you prefer, of course
$small : 576px !default;
$medium : 768px !default;
$large : 992px !default;
$extra-large : 1200px !default;
// ----------
// Fonts zone
// ----------
// Font families
$font-family-base : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default; // system font stack
$font-family-headings : sans-serif !default; // font for h1, h2.. h6
$font-family-monospace : consolas, courier, monospace !default; // font for code and samples
// Font sizes (1.6rem value is "16px" equivalent)
$font-size-base : 1.6rem !default;
$font-sizes: (
base: (
mobile : 1.4rem,
desktop : $font-size-base
),
h1: (
mobile : 2.8rem,
desktop : 3.2rem
),
h2: (
mobile : 2.4rem,
desktop : 2.8rem
),
h3: (
mobile : 2.0rem,
desktop : 2.4rem
),
h4: (
mobile : 1.8rem,
desktop : 2.0rem
),
h5: (
mobile : 1.6rem,
desktop : 1.8rem
),
h6: (
mobile : 1.4rem,
desktop : 1.6rem
)
) !default;
// Line heights
$line-height-s : 1.3 !default;
$line-height-base : 1.5 !default;
$line-height-l : 1.7 !default;
// Default margin-bottom
$margin-bottom-base : 1rem !default;
$headings-margin-bottom : $margin-bottom-base /2 !default;
$paragraph-margin-bottom: $margin-bottom-base !default;
// Font weights
$weight-light : 200 !default;
$weight-book : 300 !default;
$weight-regular : 400 !default;
$weight-medium : 500 !default;
$weight-bold : 700 !default;
// Activate hyphenation on small screens
$hyphens: true !default;
// Activate Utility classes
$utilities: true !default;
// Activate WordPress reset and styles
$wordpress: false !default;
// Activate IE10-IE11 fixes and old grid system
$ie: true !default;
// ------------
// Spacing zone
// ------------
// Number of grid-columns
$cols: 12 !default;
// Grid gutters (for .has-gutter-* classes)
$grid-gutters: (
'': 1rem,
'-l': 2rem,
'-xl': 4rem
) !default;
// Spacings
$spacer-tiny : .5rem !default;
$spacer-tiny-plus : .7rem !default;
$spacer-small : 1rem !default;
$spacer-small-plus : 1.5rem !default;
$spacer-medium : 2rem !default;
$spacer-medium-plus : 3rem !default;
$spacer-large : 4rem !default;
$spacer-large-plus : 6rem !default;
$spacer-extra-large : 8rem !default;
$spacer-extra-large-plus : 12rem !default;
$spacer-ultra-large : 16rem !default;
$spacer-ultra-large-plus : 20rem !default;
// z-indexes
$zindex-navigation : 1000 !default;
$zindex-dropdown : 2000 !default;
$zindex-popover : 3000 !default;
$zindex-tooltip : 4000 !default;
$zindex-modal : 5000 !default;
$zindex-notification : 6000 !default;
$zindex-debug : 7000 !default;
// ----------
// Color zone
// ----------
// Color names
$white : #fff !default;
$gray-100 : #f8f9fa !default;
$gray-200 : #e7e9ed !default;
$gray-300 : #dee2e6 !default;
$gray-400 : #ced4da !default;
$gray-500 : #acb3c2 !default;
$gray-600 : #727e96 !default;
$gray-700 : #454d5d !default;
$gray-800 : #333 !default;
$gray-900 : #212529 !default;
$black : #000 !default;
$blue-300 : #5BC0DE !default;
$blue-500 : #0275D8 !default;
$green-500 : #5CB85C !default;
$orange-500 : #F0AD4E !default;
$red-500 : #D9534F !default;
// Semantic colors
$color-brand : $green-500 !default;
$color-primary : $blue-500 !default;
$color-success : $green-500 !default;
$color-info : $blue-300 !default;
$color-warning : $orange-500 !default;
$color-danger : $red-500 !default;
$color-inverse : $gray-800 !default;
$color-ghost : transparent !default;
$color-muted : $gray-200 !default;
$color-base : $gray-900 !default;
$background-base : $white !default;
$forms-color : $gray-800 !default;
// ---------------
// Components zone
// ---------------
// Component: links
$link-color : $gray-800 !default;
$link-color-hover : darken($link-color, 15%) !default;
$link-decoration : underline !default;
$link-decoration-hover : underline !default;
// Global border-radius
$border-radius: 0 !default;
// Component: quotes
$quote-color : $gray-200 !default;
// Component: arrows
$arrow-color : $black !default;
// Components: checkboxes, radios, switches
$checkbox-color: $white !default;
$checkbox-background: $gray-800 !default;
$checkbox-size: 2rem !default;
$checkbox-border-radius: 4px !default;
$radio-color: $gray-800 !default;
$radio-background: $white !default;
$switch-color: $white !default;
$switch-background: $gray-800 !default;
$switch-size: 2rem !default;
$switch-border-radius: 3em !default;
// Component: tables
$table-border : $gray-500 !default;
$table-caption-color : $gray-800 !default;
$table-background : transparent !default;
$table-head-color : $color-base !default;
$table-head-background : transparent !default;
$table-footer-color : $color-base !default;
$table-footer-background : transparent !default;
// Components: buttons, badges, alerts color variants list
// Convention is: name - background-color - color - border
$variants-list: (
(primary, $color-primary, $white, none),
(success, $color-success, $white, none),
(info, $color-info, $black, none),
(warning, $color-warning, $black, none),
(danger, $color-danger, $white, none),
(inverse, $color-inverse, $white, none),
(ghost, $color-ghost, $white, 0 0 0 1px $white inset)
) !default;
// Component: tabs
$tabs-border : $gray-200 !default;
$tabs-active-border : $gray-800 !default;
$tabs-color : $color-base !default;
$tabs-active-color : $gray-800 !default;
$tabs-background : transparent !default;
$tabs-active-background : transparent !default;
$tabs-border-radius : 0 !default;
// Component: nav burger button
$burger-color : $gray-800 !default;
$burger-background : transparent !default;
$burger-hover-background : transparent !default;
$burger-size : 2.6rem !default;
$burger-weight : 5px !default; // size of stripes
$burger-padding : 0 !default;