Transfert des fichiers Reborn vers branche v8
This commit is contained in:
Raphaël Goetter
parent
f14b1294cf
commit
e3e57665a0
50 changed files with 2248 additions and 14990 deletions
|
|
@ -1,2 +1,2 @@
|
|||
>0.25%
|
||||
>1.5%
|
||||
not op_mini all
|
||||
5
.gitignore
vendored
5
.gitignore
vendored
|
|
@ -93,6 +93,7 @@ DocProject/Help/*.hhp
|
|||
DocProject/Help/Html2
|
||||
DocProject/Help/html
|
||||
|
||||
|
||||
# Click-Once directory
|
||||
publish
|
||||
|
||||
|
|
@ -167,8 +168,10 @@ pip-log.txt
|
|||
# parce qu'on s'en fout
|
||||
*.log
|
||||
|
||||
# parce que trop lourd
|
||||
# parce que trop lourd, ...
|
||||
node_modules/
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
|
||||
# parce que certaines personnes utilisent de vrais IDEs
|
||||
.idea
|
||||
|
|
|
|||
|
|
@ -1,91 +0,0 @@
|
|||
options:
|
||||
formatter: stylish
|
||||
files:
|
||||
include: '**/*.s+(a|c)ss'
|
||||
rules:
|
||||
# Extends
|
||||
extends-before-mixins: 1
|
||||
extends-before-declarations: 1
|
||||
placeholder-in-extend: 1
|
||||
|
||||
# Mixins
|
||||
mixins-before-declarations: 1
|
||||
|
||||
# Line Spacing
|
||||
one-declaration-per-line: 1
|
||||
empty-line-between-blocks: 1
|
||||
single-line-per-selector: 1
|
||||
|
||||
# Disallows
|
||||
no-attribute-selectors: 0
|
||||
no-color-hex: 0
|
||||
no-color-keywords: 0 # Modified, was 1
|
||||
no-color-literals: 0 # Modified, was 1
|
||||
no-combinators: 0
|
||||
no-css-comments: 0 # Modified, was 1
|
||||
no-debug: 1
|
||||
no-disallowed-properties: 0
|
||||
no-duplicate-properties: 1
|
||||
no-empty-rulesets: 1
|
||||
no-extends: 0
|
||||
no-ids: 1
|
||||
no-important: 0 # Modified, was 1
|
||||
no-invalid-hex: 1
|
||||
no-mergeable-selectors: 1
|
||||
no-misspelled-properties: 1
|
||||
no-qualifying-elements: 1
|
||||
no-trailing-whitespace: 1
|
||||
no-trailing-zero: 1
|
||||
no-transition-all: 1
|
||||
no-universal-selectors: 0
|
||||
no-url-protocols: 1
|
||||
no-vendor-prefixes: 1
|
||||
no-warn: 1
|
||||
property-units: 0
|
||||
|
||||
# Nesting
|
||||
force-attribute-nesting: 1
|
||||
force-element-nesting: 1
|
||||
force-pseudo-nesting: 1
|
||||
|
||||
# Name Formats
|
||||
class-name-format: 1
|
||||
function-name-format: 1
|
||||
id-name-format: 0
|
||||
mixin-name-format: 1
|
||||
placeholder-name-format: 1
|
||||
variable-name-format: 1
|
||||
|
||||
# Style Guide
|
||||
attribute-quotes: 1
|
||||
bem-depth: 0
|
||||
border-zero: 0 # Modified, was 1
|
||||
brace-style: 1
|
||||
clean-import-paths: 0 # 1 forbids leading underscores and extensions (.scss)
|
||||
empty-args: 1
|
||||
hex-length: 1
|
||||
hex-notation: 1
|
||||
indentation: 1
|
||||
leading-zero: 0 # Modified, was 1
|
||||
nesting-depth: 1
|
||||
property-sort-order: 0 # Modified, was 1 @TODO Est-ce possible de customiser pour respecter la convention Alsa ?
|
||||
pseudo-element: 1
|
||||
quotes: 0 # 1 warns that strings should use single quotes
|
||||
shorthand-values: 1
|
||||
url-quotes: 1
|
||||
variable-for-property: 1
|
||||
zero-unit: 1
|
||||
|
||||
# Inner Spacing
|
||||
space-after-comma: 1
|
||||
space-before-colon: 1
|
||||
space-after-colon: 1
|
||||
space-before-brace: 1
|
||||
space-before-bang: 1
|
||||
space-after-bang: 1
|
||||
space-between-parens: 1
|
||||
space-around-operator: 1
|
||||
|
||||
# Final Items
|
||||
trailing-semicolon: 1
|
||||
final-newline: 1
|
||||
23
bower.json
23
bower.json
|
|
@ -1,23 +0,0 @@
|
|||
{
|
||||
"name": "KNACSS",
|
||||
"version": "7.1.2",
|
||||
"homepage": "http://www.knacss.com/",
|
||||
"authors": [
|
||||
"Raphaël GOETTER, Alsacreations"
|
||||
],
|
||||
"description": "KNACSS is a minimalist, responsive and extensible style sheet to kick-start your HTML / CSS projects. It relies on common best practices and experience on the topic.",
|
||||
"main": "css/knacss.css",
|
||||
"keywords": [
|
||||
"css", "framework", "reset", "responsive", "less", "sass", "rwd", "boilerplate", "workflow"
|
||||
],
|
||||
"license": "WTFPL",
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"less/knackLESS.zip",
|
||||
"tests",
|
||||
"README.md"
|
||||
]
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
@media (min-width:480px){[class*=" grillade-"],[class^=grillade-]{display:-ms-grid;display:grid}[class*=" grillade-"].has-gutter,[class^=grillade-].has-gutter{grid-gap:1rem}[class*=" grillade-"].has-gutter-l,[class^=grillade-].has-gutter-l{grid-gap:2rem}[class*=" grillade-"].has-gutter-xl,[class^=grillade-].has-gutter-xl{grid-gap:4rem}}@media (min-width:480px){.autogrillade,.grillade{display:-ms-grid;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.autogrillade.has-gutter,.grillade.has-gutter{grid-column-gap:1rem}.autogrillade.has-gutter-l,.grillade.has-gutter-l{grid-column-gap:2rem}.autogrillade.has-gutter-xl,.grillade.has-gutter-xl{grid-column-gap:4rem}}[class*=grillade-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=grillade-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=grillade-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=grillade-5]{-ms-grid-columns:(1fr)[5];grid-template-columns:repeat(5,1fr)}[class*=grillade-6]{-ms-grid-columns:(1fr)[6];grid-template-columns:repeat(6,1fr)}[class*=grillade-7]{-ms-grid-columns:(1fr)[7];grid-template-columns:repeat(7,1fr)}[class*=grillade-8]{-ms-grid-columns:(1fr)[8];grid-template-columns:repeat(8,1fr)}[class*=grillade-9]{-ms-grid-columns:(1fr)[9];grid-template-columns:repeat(9,1fr)}[class*=grillade-10]{-ms-grid-columns:(1fr)[10];grid-template-columns:repeat(10,1fr)}[class*=grillade-11]{-ms-grid-columns:(1fr)[11];grid-template-columns:repeat(11,1fr)}[class*=grillade-12]{-ms-grid-columns:(1fr)[12];grid-template-columns:repeat(12,1fr)}[class*=col-1]{grid-column:auto/span 1}[class*=row-1]{grid-row:auto/span 1}[class*=col-2]{grid-column:auto/span 2}[class*=row-2]{grid-row:auto/span 2}[class*=col-3]{grid-column:auto/span 3}[class*=row-3]{grid-row:auto/span 3}[class*=col-4]{grid-column:auto/span 4}[class*=row-4]{grid-row:auto/span 4}[class*=col-5]{grid-column:auto/span 5}[class*=row-5]{grid-row:auto/span 5}[class*=col-6]{grid-column:auto/span 6}[class*=row-6]{grid-row:auto/span 6}[class*=col-7]{grid-column:auto/span 7}[class*=row-7]{grid-row:auto/span 7}[class*=col-8]{grid-column:auto/span 8}[class*=row-8]{grid-row:auto/span 8}[class*=col-9]{grid-column:auto/span 9}[class*=row-9]{grid-row:auto/span 9}[class*=col-10]{grid-column:auto/span 10}[class*=row-10]{grid-row:auto/span 10}[class*=col-11]{grid-column:auto/span 11}[class*=row-11]{grid-row:auto/span 11}[class*=col-12]{grid-column:auto/span 12}[class*=row-12]{grid-row:auto/span 12}@media (min-width:480px) and (max-width:991px){[class*=grillade-][class*=-medium-1]{-ms-grid-columns:(1fr)[1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*=-medium-1]{grid-column:auto/span 1}[class*=grillade-][class*=-medium-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=col-][class*=-medium-2]{grid-column:auto/span 2}[class*=grillade-][class*=-medium-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=col-][class*=-medium-3]{grid-column:auto/span 3}[class*=grillade-][class*=-medium-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=col-][class*=-medium-4]{grid-column:auto/span 4}[class*=-medium-all]{grid-column:1/-1}}@media (min-width:480px) and (max-width:767px){[class*=grillade-][class*=-small-1]{-ms-grid-columns:(1fr)[1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*=-small-1]{grid-column:auto/span 1}[class*=grillade-][class*=-small-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=col-][class*=-small-2]{grid-column:auto/span 2}[class*=grillade-][class*=-small-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=col-][class*=-small-3]{grid-column:auto/span 3}[class*=grillade-][class*=-small-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=col-][class*=-small-4]{grid-column:auto/span 4}[class*=-small-all]{grid-column:1/-1}}[class*=-start]{-webkit-box-pack:start;justify-content:start}[class*=-end]{-webkit-box-pack:end;justify-content:end}[class*=-center]{-webkit-box-pack:center;justify-content:center}[class*=-space-between]{-webkit-box-pack:justify;justify-content:space-between}[class*=-space-around]{justify-content:space-around}[class*=-space-evenly]{-webkit-box-pack:space-evenly;justify-content:space-evenly}.item-first{-webkit-box-ordinal-group:0;order:-1}.item-last{-webkit-box-ordinal-group:2;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1}
|
||||
1
css/grillade/grillade.css
Normal file
1
css/grillade/grillade.css
Normal file
File diff suppressed because one or more lines are too long
669
css/knacss-full/knacss.css
Normal file
669
css/knacss-full/knacss.css
Normal file
|
|
@ -0,0 +1,669 @@
|
|||
/*!
|
||||
* KNACSS Reborn: Just keep it simple!
|
||||
* @author: Alsacreations
|
||||
* v1.0.0 2020/11
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
/* ----------------------------- */
|
||||
/* ==Reset (base) */
|
||||
/* ----------------------------- */
|
||||
/*
|
||||
* 1. Switch to border-box model for all elements
|
||||
* 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 */
|
||||
min-height: 0;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Remove the grey highlight on links in iOS
|
||||
* 2. Prevent orientation font changes in iOS
|
||||
* 3. Breaks words to prevent overflow in all browsers
|
||||
*/
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
/* 1 */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
/* 2 */
|
||||
overflow-wrap: break-word;
|
||||
/* 3 */
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
font-size: 1.6rem;
|
||||
line-height: 1.5;
|
||||
background-color: #ffffff;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
/*
|
||||
* Headings
|
||||
*/
|
||||
h1,
|
||||
.h1-like,
|
||||
h2,
|
||||
.h2-like,
|
||||
h3,
|
||||
.h3-like,
|
||||
h4,
|
||||
.h4-like,
|
||||
h5,
|
||||
.h5-like,
|
||||
h6,
|
||||
.h6-like {
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
/*
|
||||
* Links
|
||||
*/
|
||||
a {
|
||||
color: #454d5d;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:hover,
|
||||
a:active {
|
||||
color: #212529;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
abbr[title] {
|
||||
border-bottom: none;
|
||||
/* 1 */
|
||||
text-decoration: underline;
|
||||
/* 2 */
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Vertical rythm
|
||||
*/
|
||||
h1,
|
||||
.h1-like,
|
||||
h2,
|
||||
.h2-like {
|
||||
margin-top: 0;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
p,
|
||||
address,
|
||||
ol,
|
||||
ul,
|
||||
dl,
|
||||
blockquote,
|
||||
pre,
|
||||
h3,
|
||||
.h3-like,
|
||||
h4,
|
||||
.h4-like,
|
||||
h5,
|
||||
.h5-like,
|
||||
h6,
|
||||
.h6-like,
|
||||
dt,
|
||||
dd {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Nested elements
|
||||
*/
|
||||
ol ol,
|
||||
ol ul,
|
||||
ul ol,
|
||||
ul ul,
|
||||
li ul,
|
||||
li ol,
|
||||
nav ul,
|
||||
nav ol,
|
||||
li p,
|
||||
li .p-like {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Lists
|
||||
*/
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
nav ul,
|
||||
nav ol {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Embed content
|
||||
*/
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
img,
|
||||
table,
|
||||
td,
|
||||
blockquote,
|
||||
pre,
|
||||
code,
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
video,
|
||||
svg,
|
||||
iframe {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
iframe,
|
||||
img,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the border on iframes in all browsers
|
||||
*/
|
||||
iframe {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Fill color matching to text color
|
||||
*/
|
||||
svg:not([fill]) {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
/*
|
||||
* Hide the overflow in IE
|
||||
*/
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
* Tables
|
||||
*/
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
/*
|
||||
* Rulers
|
||||
*/
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
border: 0;
|
||||
border-top: 1px solid;
|
||||
margin: 2rem 0;
|
||||
clear: both;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
* table styles
|
||||
*/
|
||||
table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
vertical-align: top;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Hidden but not for an assistive technology like a screen reader, Yahoo! method
|
||||
*/
|
||||
.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;
|
||||
}
|
||||
|
||||
/*
|
||||
* Disable animations styles when reduced motion is enabled
|
||||
*/
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Change the cursor on busy elements in all browsers.
|
||||
*/
|
||||
[aria-busy="true"] {
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
/*
|
||||
* Change the cursor on control elements in all browsers.
|
||||
*/
|
||||
[aria-controls] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*
|
||||
* Change the cursor on disabled, not-editable, or otherwise
|
||||
* inoperable elements in all browsers.
|
||||
*/
|
||||
[aria-disabled="true"],
|
||||
[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/*
|
||||
* Change the display on visually hidden accessible elements
|
||||
* in all browsers.
|
||||
*/
|
||||
[aria-hidden="false"][hidden] {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
[aria-hidden="false"][hidden]:not(:focus) {
|
||||
clip: rect(0, 0, 0, 0);
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Reset (forms) */
|
||||
/* ----------------------------- */
|
||||
/*
|
||||
* Remove the tapping delay on clickable elements in all browsers .
|
||||
*/
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea,
|
||||
[tabindex] {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Change the inconsistent appearance in all browsers.
|
||||
* 2. Add typography inheritance in all browsers.
|
||||
*/
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin: 0;
|
||||
background-color: transparent;
|
||||
/* 1 */
|
||||
color: inherit;
|
||||
/* 1 */
|
||||
font-family: inherit;
|
||||
/* 2 */
|
||||
font-size: inherit;
|
||||
/* 2 */
|
||||
line-height: inherit;
|
||||
/* 2 */
|
||||
letter-spacing: inherit;
|
||||
/* 2 */
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/*
|
||||
* Basic User Interface reset
|
||||
*/
|
||||
button,
|
||||
input:not([type="radio"]):not([type="checkbox"]),
|
||||
select,
|
||||
textarea {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
/* 1 */
|
||||
font-size: 1em;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
pre {
|
||||
-moz-tab-size: 2;
|
||||
tab-size: 2;
|
||||
white-space: pre-wrap;
|
||||
line-height: normal;
|
||||
overflow: auto;
|
||||
-ms-overflow-style: scrollbar;
|
||||
}
|
||||
|
||||
/*
|
||||
* Show overflow in IE/Edge
|
||||
*/
|
||||
button,
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the inheritance of text transform in Firefox
|
||||
*/
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
form,
|
||||
fieldset {
|
||||
border: none;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
legend {
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
padding: 0 0.5rem;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
vertical-align: top;
|
||||
resize: vertical;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
progress {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* Form oddities */
|
||||
/* ----------------------------- */
|
||||
/*
|
||||
* 1. Correct the odd appearance in Chrome, Edge, and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
/* 1 */
|
||||
outline-offset: -2px;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Correct the cursor style of increment and decrement buttons in Safari.
|
||||
*/
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Correct the text style of placeholders in Chrome, Edge, and Safari.
|
||||
*/
|
||||
::-webkit-input-placeholder {
|
||||
color: inherit;
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the inner padding in Chrome, Edge, and Safari on macOS.
|
||||
*/
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Correct the inability to style upload buttons in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
/* 1 */
|
||||
font: inherit;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the inner border and padding of focus outlines in Firefox.
|
||||
*/
|
||||
::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Restore the focus outline styles unset by the previous rule in Firefox.
|
||||
*/
|
||||
:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the additional :invalid styles in Firefox.
|
||||
*/
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Print (quick print reset) */
|
||||
/* ----------------------------- */
|
||||
@media print {
|
||||
* {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
body {
|
||||
width: auto;
|
||||
margin: auto;
|
||||
font-family: serif;
|
||||
font-size: 12pt;
|
||||
}
|
||||
p,
|
||||
.p-like,
|
||||
h1,
|
||||
.h1-like,
|
||||
h2,
|
||||
.h2-like,
|
||||
h3,
|
||||
.h3-like,
|
||||
h4,
|
||||
.h4-like,
|
||||
h5,
|
||||
.h5-like,
|
||||
h6,
|
||||
.h6-like,
|
||||
blockquote,
|
||||
label,
|
||||
ul,
|
||||
ol {
|
||||
color: #000;
|
||||
margin: auto;
|
||||
}
|
||||
.print {
|
||||
display: block;
|
||||
}
|
||||
.no-print {
|
||||
display: none;
|
||||
}
|
||||
/* no orphans, no widows */
|
||||
p,
|
||||
.p-like,
|
||||
blockquote {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
/* no breaks inside these elements */
|
||||
blockquote,
|
||||
ul,
|
||||
ol {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
/* page break before main headers
|
||||
h1,
|
||||
.h1-like {
|
||||
page-break-before: always;
|
||||
}
|
||||
*/
|
||||
/* no breaks after these elements */
|
||||
h1,
|
||||
.h1-like,
|
||||
h2,
|
||||
.h2-like,
|
||||
h3,
|
||||
.h3-like,
|
||||
caption {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
/* displaying URLs
|
||||
a[href]::after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
*/
|
||||
a[href^="javascript:"]::after,
|
||||
a[href^="#"]::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------- */
|
||||
/* ==Layout classes */
|
||||
/* ----------------------------- */
|
||||
/* Global container */
|
||||
.layout-maxed {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.layout-maxed {
|
||||
grid-template-columns: minmax(1rem, 1fr) minmax(auto, 576px) minmax(1rem, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.layout-maxed {
|
||||
grid-template-columns: minmax(1rem, 1fr) minmax(auto, 768px) minmax(1rem, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.layout-maxed {
|
||||
grid-template-columns: minmax(1rem, 1fr) minmax(auto, 1024px) minmax(1rem, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
.layout-maxed {
|
||||
grid-template-columns: minmax(1rem, 1fr) minmax(auto, 1330px) minmax(1rem, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* Center all children */
|
||||
.layout-maxed > * {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
/* Hero box */
|
||||
.layout-hero {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: inherit;
|
||||
}
|
||||
|
||||
.layout-hero > * {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
/* Hero image */
|
||||
.layout-hero-img {
|
||||
grid-column: 1 / -1;
|
||||
justify-self: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
1
css/knacss-mini/knacss.css
Normal file
1
css/knacss-mini/knacss.css
Normal file
|
|
@ -0,0 +1 @@
|
|||
/*! KNACSS Reborn: Just keep it simple! @author: Alsacreations v1.0.0 2020/11 Licence WTFPL http://www.wtfpl.net/ */*,:after,:before{box-sizing:border-box;min-width:0;min-height:0}html{font-size:62.5%;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overflow-wrap:break-word}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:1.6rem;line-height:1.5;background-color:#fff}.h1-like,.h2-like,.h3-like,.h4-like,.h5-like,.h6-like,body,h1,h2,h3,h4,h5,h6{color:#212529}a{color:#454d5d;text-decoration:underline}a:active,a:focus,a:hover{color:#212529;text-decoration:underline}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.h1-like,.h2-like,h1,h2{margin-top:0;margin-bottom:2rem}.h3-like,.h4-like,.h5-like,.h6-like,address,blockquote,dd,dl,dt,h3,h4,h5,h6,ol,p,pre,ul{margin-top:0;margin-bottom:1rem}li .p-like,li ol,li p,li ul,nav ol,nav ul,ol ol,ol ul,ul ol,ul ul{margin-top:0;margin-bottom:0}ol,ul{padding-left:2rem}nav ol,nav ul{list-style:none;padding:0}audio,canvas,iframe,img,svg,video{vertical-align:middle}blockquote,code,iframe,img,input,pre,select,svg,table,td,textarea,video{max-width:100%}iframe,img,input,select,textarea{height:auto}iframe,img{border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}hr{box-sizing:initial;height:0;overflow:visible;border:0;border-top:1px solid;margin:2rem 0;clear:both;color:inherit}table{width:100%;max-width:100%;table-layout:fixed;border-collapse:collapse;vertical-align:top;margin-bottom:2rem}.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}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{touch-action:manipulation}button,input,select,textarea{margin:0;background-color:initial;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;letter-spacing:inherit;vertical-align:middle}button,input:not([type=radio]):not([type=checkbox]),select,textarea{border:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}pre{-moz-tab-size:2;tab-size:2;white-space:pre-wrap;line-height:normal;overflow:auto;-ms-overflow-style:scrollbar}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}fieldset,form{border:none}fieldset{margin:0;padding:2rem}legend{display:table;max-width:100%;padding:0 .5rem;border:0;color:inherit;white-space:normal}label{display:inline-block;cursor:pointer}textarea{overflow:auto;vertical-align:top;resize:vertical;white-space:pre-wrap}progress{width:100%;vertical-align:initial}output,progress{display:inline-block}summary{display:list-item}template{display:none}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}.layout-maxed{display:grid}.layout-maxed>*{grid-column:2}.layout-hero{grid-column:1/-1;display:grid;grid-template-columns:inherit}.layout-hero>*{grid-column:2}.layout-hero-img{grid-column:1/-1;justify-self:center;max-width:100%}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media print{*{background:transparent!important;box-shadow:none!important;text-shadow:none!important}body{width:auto;margin:auto;font-family:serif;font-size:12pt}.h1-like,.h2-like,.h3-like,.h4-like,.h5-like,.h6-like,.p-like,blockquote,h1,h2,h3,h4,h5,h6,label,ol,p,ul{color:#000;margin:auto}.print{display:block}.no-print{display:none}.p-like,blockquote,p{orphans:3;widows:3}blockquote,ol,ul{page-break-inside:avoid}.h1-like,.h2-like,.h3-like,caption,h1,h2,h3{page-break-after:avoid}a{color:#000}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}}@media (min-width:576px){.layout-maxed{grid-template-columns:minmax(1rem,1fr) minmax(auto,576px) minmax(1rem,1fr)}}@media (min-width:768px){.layout-maxed{grid-template-columns:minmax(1rem,1fr) minmax(auto,768px) minmax(1rem,1fr)}}@media (min-width:1024px){.layout-maxed{grid-template-columns:minmax(1rem,1fr) minmax(auto,1024px) minmax(1rem,1fr)}}@media (min-width:1330px){.layout-maxed{grid-template-columns:minmax(1rem,1fr) minmax(auto,1330px) minmax(1rem,1fr)}}
|
||||
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
106
gulpfile.js
106
gulpfile.js
|
|
@ -1,74 +1,56 @@
|
|||
// Requires
|
||||
var gulp = require('gulp');
|
||||
|
||||
// Include plugins
|
||||
var postcss = require('gulp-postcss');
|
||||
const gulp = require('gulp');
|
||||
var sass = require('gulp-sass');
|
||||
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');
|
||||
|
||||
var cssnano = require('cssnano'); // minifies CSS
|
||||
var autoprefixer = require('autoprefixer');
|
||||
|
||||
var unprefix = require('postcss-unprefix'); // deletes old prefixes
|
||||
var flexbugs = require('postcss-flexbugs-fixes'); // flexbox fixes for IE
|
||||
var gaps = require('postcss-gap-properties'); // gaps polyfill
|
||||
|
||||
var plugins = [
|
||||
unprefix(),
|
||||
autoprefixer({
|
||||
grid: true
|
||||
}),
|
||||
flexbugs(),
|
||||
gaps()
|
||||
];
|
||||
|
||||
var pluginsProd = [
|
||||
unprefix(),
|
||||
autoprefixer({
|
||||
grid: true
|
||||
}),
|
||||
flexbugs(),
|
||||
gaps(),
|
||||
cssnano()
|
||||
];
|
||||
|
||||
// tâche cssDev = compile vers knacss-unminified.css
|
||||
gulp.task('cssDev', () => {
|
||||
return gulp.src('./sass/knacss.scss')
|
||||
.pipe(sass({
|
||||
outputStyle: 'expanded' // CSS non minifiée plus lisible ('}' à la ligne)
|
||||
gulp.task('css:full', () => {
|
||||
return gulp.src('sass/knacss.scss')
|
||||
.pipe(sass(
|
||||
{
|
||||
outputStyle: 'expanded'
|
||||
}))
|
||||
.pipe(postcss(plugins))
|
||||
.pipe(rename('knacss-unminified.css'))
|
||||
.pipe(gulp.dest('./css/'));
|
||||
.pipe(
|
||||
postcss([
|
||||
autoprefixer, // ajoute les préfixes vendeurs
|
||||
]))
|
||||
.pipe(gulp.dest('css/knacss-full'));
|
||||
});
|
||||
|
||||
// tâche cssProd = compile vers knacss.css minifié
|
||||
gulp.task('cssProd', () => {
|
||||
return gulp.src('./sass/knacss.scss')
|
||||
.pipe(sass())
|
||||
.pipe(postcss(pluginsProd))
|
||||
.pipe(gulp.dest('./css/'));
|
||||
gulp.task('css:mini', () => {
|
||||
return gulp.src('sass/knacss.scss')
|
||||
.pipe(sass(
|
||||
{
|
||||
outputStyle: 'compact'
|
||||
}))
|
||||
.pipe(
|
||||
postcss([
|
||||
CombineMQ, // rassemble les Media Queries (parfait pour les classes utilitaires)
|
||||
autoprefixer, // ajoute les préfixes vendeurs
|
||||
CSSnano // minification
|
||||
]))
|
||||
.pipe(gulp.dest('css/knacss-mini'));
|
||||
});
|
||||
|
||||
gulp.task('grillade', () => {
|
||||
return gulp.src('./sass/base/grillade-grid.scss')
|
||||
.pipe(sass())
|
||||
.pipe(postcss(pluginsProd))
|
||||
.pipe(gulp.dest('./css/'));
|
||||
gulp.task('css:grillade', () => {
|
||||
return gulp.src('sass/utils/grillade.scss')
|
||||
.pipe(sass(
|
||||
{
|
||||
outputStyle: 'compact'
|
||||
}))
|
||||
.pipe(
|
||||
postcss([
|
||||
CombineMQ, // rassemble les Media Queries (parfait pour les classes utilitaires)
|
||||
autoprefixer, // ajoute les préfixes vendeurs
|
||||
CSSnano // minification
|
||||
]))
|
||||
.pipe(gulp.dest('css/grillade'));
|
||||
});
|
||||
|
||||
gulp.task('grillade-flex', () => {
|
||||
return gulp.src('./sass/base/grillade-flex.scss')
|
||||
.pipe(sass())
|
||||
.pipe(postcss(pluginsProd))
|
||||
.pipe(gulp.dest('./css/'));
|
||||
});
|
||||
|
||||
// Watcher
|
||||
gulp.task('watch', () => {
|
||||
gulp.watch(['./sass/*.scss'], gulp.series('cssDev'));
|
||||
});
|
||||
// Tâche BUILD : tapez "gulp" ou "gulp build"
|
||||
gulp.task('build', gulp.series('css:full', 'css:mini', 'css:grillade'));
|
||||
|
||||
// Tâche par défaut
|
||||
gulp.task('default', gulp.series('cssDev', 'cssProd', 'grillade', 'grillade-flex'));
|
||||
gulp.task('default', gulp.series('build'));
|
||||
|
|
|
|||
5846
package-lock.json
generated
5846
package-lock.json
generated
File diff suppressed because it is too large
Load diff
45
package.json
45
package.json
|
|
@ -1,40 +1,15 @@
|
|||
{
|
||||
"name": "knacss",
|
||||
"version": "8.0.0-alpha.0",
|
||||
"homepage": "http://www.knacss.com/",
|
||||
"bugs": "https://github.com/alsacreations/KNACSS/issues",
|
||||
"author": "Raphaël GOETTER, Alsacreations",
|
||||
"contributors": [
|
||||
"Raphaël GOETTER, Alsacreations"
|
||||
],
|
||||
"description": "KNACSS is a minimalist, responsive and extensible style sheet to kick-start your HTML / CSS projects. It relies on common best practices and experience on the topic.",
|
||||
"main": "https://github.com/alsacreations/KNACSS/tree/master/css",
|
||||
"keywords": [
|
||||
"css",
|
||||
"framework",
|
||||
"reset",
|
||||
"responsive",
|
||||
"sass",
|
||||
"rwd",
|
||||
"boilerplate",
|
||||
"workflow"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/alsacreations/KNACSS"
|
||||
},
|
||||
"license": "WTFPL",
|
||||
"dependencies": {},
|
||||
"name": "demo",
|
||||
"version": "0.0.0",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^9.6.1",
|
||||
"cssnano": "^4.1.10",
|
||||
"gulp": "^4.0.0",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-postcss": "^8.0.0",
|
||||
"gulp-rename": "^1.4.0",
|
||||
"gulp-sass": "^4.0.2",
|
||||
"postcss-flexbugs-fixes": "latest",
|
||||
"postcss-gap-properties": "latest",
|
||||
"postcss-unprefix": "^2.1.4"
|
||||
"gulp-sass": "^4.1.0"
|
||||
},
|
||||
"engines": {}
|
||||
"dependencies": {
|
||||
"autoprefixer": "^9.7.1",
|
||||
"postcss-combine-media-query": "^1.0.1",
|
||||
"cssnano": "^4.1.10",
|
||||
"gulp-rename": "^2.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
32
sass/abstracts/_mixins-sass.scss
Normal file
32
sass/abstracts/_mixins-sass.scss
Normal 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.";
|
||||
}
|
||||
}
|
||||
|
|
@ -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
197
sass/abstracts/_variables-sass.scss
Normal 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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -1,65 +1,41 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Global Micro Layout */
|
||||
/* ---------------------------- */
|
||||
/* ==Layout classes */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* Flexbox layout is KNACSS choice
|
||||
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
||||
*/
|
||||
/* Global container */
|
||||
.layout-maxed {
|
||||
display: grid;
|
||||
|
||||
.flex-container,
|
||||
.d-flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@each $key,
|
||||
$value in $breakpoints {
|
||||
@media (min-width: #{$value}) {
|
||||
grid-template-columns:
|
||||
minmax($spacer-small, 1fr)
|
||||
minmax(auto, $value)
|
||||
minmax($spacer-small, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex-container--row,
|
||||
.flex-row {
|
||||
@extend .flex-container;
|
||||
flex-direction: row;
|
||||
/* Center all children */
|
||||
.layout-maxed > * {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.flex-container--column,
|
||||
.flex-column {
|
||||
@extend .flex-container;
|
||||
flex-direction: column;
|
||||
/* Hero box */
|
||||
.layout-hero {
|
||||
grid-column: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: inherit;
|
||||
}
|
||||
|
||||
.flex-container--row-reverse,
|
||||
.flex-row-reverse {
|
||||
@extend .flex-container;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
.layout-hero > * {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.flex-container--column-reverse,
|
||||
.flex-column-reverse {
|
||||
@extend .flex-container;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.flex-item-fluid,
|
||||
.item-fluid {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
.flex-item-first,
|
||||
.item-first {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.flex-item-medium,
|
||||
.item-medium {
|
||||
order: 0;
|
||||
}
|
||||
|
||||
.flex-item-last,
|
||||
.item-last {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.flex-item-center,
|
||||
.item-center,
|
||||
.mr-auto {
|
||||
margin: auto;
|
||||
/* Hero image */
|
||||
.layout-hero-img {
|
||||
grid-column: 1 / -1;
|
||||
justify-self: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
65
sass/base/_reset-accessibility.scss
Normal file
65
sass/base/_reset-accessibility.scss
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
/*
|
||||
* Hidden but not for an assistive technology like a screen reader, Yahoo! method
|
||||
*/
|
||||
|
||||
.visually-hidden,
|
||||
.sr-only {
|
||||
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;
|
||||
}
|
||||
|
||||
/*
|
||||
* Disable animations styles when reduced motion is enabled
|
||||
*/
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Change the cursor on busy elements in all browsers.
|
||||
*/
|
||||
|
||||
[aria-busy="true"] {
|
||||
cursor: progress;
|
||||
}
|
||||
|
||||
/*
|
||||
* Change the cursor on control elements in all browsers.
|
||||
*/
|
||||
|
||||
[aria-controls] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*
|
||||
* Change the cursor on disabled, not-editable, or otherwise
|
||||
* inoperable elements in all browsers.
|
||||
*/
|
||||
|
||||
[aria-disabled="true"],
|
||||
[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/*
|
||||
* Change the display on visually hidden accessible elements
|
||||
* in all browsers.
|
||||
*/
|
||||
|
||||
[aria-hidden="false"][hidden] {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
[aria-hidden="false"][hidden]:not(:focus) {
|
||||
clip: rect(0, 0, 0, 0);
|
||||
position: absolute;
|
||||
}
|
||||
250
sass/base/_reset-base.scss
Normal file
250
sass/base/_reset-base.scss
Normal file
|
|
@ -0,0 +1,250 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Reset (base) */
|
||||
/* ----------------------------- */
|
||||
|
||||
/*
|
||||
* 1. Switch to border-box model for all elements
|
||||
* 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 */
|
||||
min-height: 0; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Remove the grey highlight on links in iOS
|
||||
* 2. Prevent orientation font changes in iOS
|
||||
* 3. Breaks words to prevent overflow in all browsers
|
||||
*/
|
||||
|
||||
html {
|
||||
font-size: $font-size-html;
|
||||
-webkit-tap-highlight-color: transparent; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
overflow-wrap: break-word; /* 3 */
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: $font-family-base;
|
||||
font-size: $font-size-base;
|
||||
line-height: $line-height-base;
|
||||
background-color: $white;
|
||||
color: $color-gamma;
|
||||
}
|
||||
|
||||
/*
|
||||
* Headings
|
||||
*/
|
||||
|
||||
h1,
|
||||
.h1-like,
|
||||
h2,
|
||||
.h2-like,
|
||||
h3,
|
||||
.h3-like,
|
||||
h4,
|
||||
.h4-like,
|
||||
h5,
|
||||
.h5-like,
|
||||
h6,
|
||||
.h6-like {
|
||||
color: $color-gamma;
|
||||
}
|
||||
|
||||
/*
|
||||
* Links
|
||||
*/
|
||||
|
||||
a {
|
||||
color: $color-beta;
|
||||
text-decoration: $link-decoration;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:hover,
|
||||
a:active {
|
||||
color: $color-gamma;
|
||||
text-decoration: $link-decoration-hover;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Vertical rythm
|
||||
*/
|
||||
|
||||
h1,
|
||||
.h1-like,
|
||||
h2,
|
||||
.h2-like {
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacer-medium;
|
||||
}
|
||||
|
||||
p,
|
||||
address,
|
||||
ol,
|
||||
ul,
|
||||
dl,
|
||||
blockquote,
|
||||
pre,
|
||||
h3,
|
||||
.h3-like,
|
||||
h4,
|
||||
.h4-like,
|
||||
h5,
|
||||
.h5-like,
|
||||
h6,
|
||||
.h6-like,
|
||||
dt,
|
||||
dd {
|
||||
margin-top: 0;
|
||||
margin-bottom: $spacer-small;
|
||||
}
|
||||
|
||||
/*
|
||||
* Nested elements
|
||||
*/
|
||||
|
||||
ol ol,
|
||||
ol ul,
|
||||
ul ol,
|
||||
ul ul,
|
||||
li ul,
|
||||
li ol,
|
||||
nav ul,
|
||||
nav ol,
|
||||
li p,
|
||||
li .p-like {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Lists
|
||||
*/
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: $spacer-medium;
|
||||
}
|
||||
|
||||
nav ul,
|
||||
nav ol {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Embed content
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
iframe,
|
||||
img,
|
||||
svg,
|
||||
video {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
img,
|
||||
table,
|
||||
td,
|
||||
blockquote,
|
||||
pre,
|
||||
code,
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
video,
|
||||
svg,
|
||||
iframe {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
iframe,
|
||||
img,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the border on iframes in all browsers
|
||||
*/
|
||||
|
||||
iframe {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Fill color matching to text color
|
||||
*/
|
||||
|
||||
svg:not([fill]) {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
/*
|
||||
* Hide the overflow in IE
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
* Tables
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
/*
|
||||
* Rulers
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
border: 0;
|
||||
border-top: 1px solid;
|
||||
margin: $spacer-medium 0;
|
||||
clear: both;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
* table styles
|
||||
*/
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
vertical-align: top;
|
||||
margin-bottom: $spacer-medium;
|
||||
}
|
||||
224
sass/base/_reset-forms.scss
Normal file
224
sass/base/_reset-forms.scss
Normal file
|
|
@ -0,0 +1,224 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Reset (forms) */
|
||||
/* ----------------------------- */
|
||||
|
||||
/*
|
||||
* Remove the tapping delay on clickable elements in all browsers .
|
||||
*/
|
||||
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea,
|
||||
[tabindex] {
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Change the inconsistent appearance in all browsers.
|
||||
* 2. Add typography inheritance in all browsers.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin: 0;
|
||||
background-color: transparent; /* 1 */
|
||||
color: inherit; /* 1 */
|
||||
font-family: inherit; /* 2 */
|
||||
font-size: inherit; /* 2 */
|
||||
line-height: inherit; /* 2 */
|
||||
letter-spacing: inherit; /* 2 */
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/*
|
||||
* Basic User Interface reset
|
||||
*/
|
||||
|
||||
button,
|
||||
input:not([type="radio"]):not([type="checkbox"]),
|
||||
select,
|
||||
textarea {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
pre {
|
||||
tab-size: 2;
|
||||
white-space: pre-wrap;
|
||||
line-height: normal;
|
||||
overflow: auto;
|
||||
-ms-overflow-style: scrollbar;
|
||||
}
|
||||
|
||||
/*
|
||||
* Show overflow in IE/Edge
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the inheritance of text transform in Firefox
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
form,
|
||||
fieldset {
|
||||
border: none;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: $spacer-medium;
|
||||
}
|
||||
|
||||
legend {
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
padding: 0 $spacer-tiny;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
vertical-align: top;
|
||||
resize: vertical;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
progress {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* Form oddities */
|
||||
/* ----------------------------- */
|
||||
|
||||
/*
|
||||
* 1. Correct the odd appearance in Chrome, Edge, and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Correct the cursor style of increment and decrement buttons in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Correct the text style of placeholders in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: inherit;
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the inner padding in Chrome, Edge, and Safari on macOS.
|
||||
*/
|
||||
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Correct the inability to style upload buttons in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the inner border and padding of focus outlines in Firefox.
|
||||
*/
|
||||
|
||||
::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Restore the focus outline styles unset by the previous rule in Firefox.
|
||||
*/
|
||||
|
||||
:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/*
|
||||
* Remove the additional :invalid styles in Firefox.
|
||||
*/
|
||||
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -89,10 +89,8 @@
|
|||
}
|
||||
*/
|
||||
|
||||
a[href^="javascript:"],
|
||||
a[href^="#"] {
|
||||
&::after {
|
||||
a[href^="javascript:"]::after,
|
||||
a[href^="#"]::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,518 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Reset (global) */
|
||||
/* ----------------------------- */
|
||||
|
||||
/**
|
||||
* disable animations styles when reduced motion is enabled
|
||||
*/
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. switch to border-box model for all elements
|
||||
* 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 */
|
||||
min-height: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. remove the grey highlight on links in iOS
|
||||
* 2. prevent orientation font changes in iOS
|
||||
* 3. set base font-size to equiv "10px", which is adapted to rem unit
|
||||
*/
|
||||
|
||||
html {
|
||||
-webkit-tap-highlight-color: transparent; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
font-size: calc(1em * 0.625); /* 3 */
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
@include font-size(base);
|
||||
background-color: $background-base;
|
||||
color: $color-base;
|
||||
font-family: $font-family-base;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
/**
|
||||
* links
|
||||
*/
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
text-decoration: $link-decoration;
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active {
|
||||
color: $link-color-hover;
|
||||
text-decoration: $link-decoration-hover;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* headings
|
||||
*/
|
||||
|
||||
h1, .h1-like {
|
||||
@include font-size(h1);
|
||||
@if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
|
||||
font-family: $font-family-headings;
|
||||
}
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
h2, .h2-like {
|
||||
@include font-size(h2);
|
||||
@if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
|
||||
font-family: $font-family-headings;
|
||||
}
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
h3, .h3-like {
|
||||
@include font-size(h3);
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
h4, .h4-like {
|
||||
@include font-size(h4);
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
h5, .h5-like {
|
||||
@include font-size(h5);
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
h6, .h6-like {
|
||||
@include font-size(h6);
|
||||
font-weight: $weight-medium;
|
||||
}
|
||||
|
||||
/**
|
||||
* vertical rythm
|
||||
*/
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
dd {
|
||||
margin-top: 0;
|
||||
margin-bottom: $headings-margin-bottom;
|
||||
}
|
||||
|
||||
p,
|
||||
address,
|
||||
ol,
|
||||
ul,
|
||||
dl,
|
||||
blockquote,
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: $paragraph-margin-bottom;
|
||||
}
|
||||
|
||||
/**
|
||||
* avoid margin on nested elements
|
||||
*/
|
||||
|
||||
li p,
|
||||
li .p-like,
|
||||
li ul,
|
||||
li ol,
|
||||
ol ol,
|
||||
ul ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Reset (common styling) */
|
||||
/* ----------------------------- */
|
||||
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
[role="button"],
|
||||
.btn,
|
||||
.button,
|
||||
[type="button"]
|
||||
input:not([type="range"]),
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea {
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
img,
|
||||
table,
|
||||
td,
|
||||
blockquote,
|
||||
code,
|
||||
pre,
|
||||
textarea,
|
||||
input,
|
||||
video,
|
||||
svg {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* fill color matching to text color
|
||||
*/
|
||||
|
||||
svg:not([fill]) {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
em,
|
||||
.italic,
|
||||
address,
|
||||
cite,
|
||||
i,
|
||||
var {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Reset (buttons) */
|
||||
/* ----------------------------- */
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. show overflow in IE/Edge
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
overflow: visible; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. remove the inheritance of text transform in Firefox
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none; /* 1 */
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText; /* 1 */
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Reset (forms) */
|
||||
/* ----------------------------- */
|
||||
|
||||
form,
|
||||
fieldset {
|
||||
border: none;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding: $spacer-medium;
|
||||
}
|
||||
|
||||
legend {
|
||||
padding: 0 $spacer-tiny;
|
||||
border: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
min-height: 5em;
|
||||
vertical-align: top;
|
||||
resize: vertical;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
progress {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Reset (inputs) */
|
||||
/* ----------------------------- */
|
||||
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
outline-offset: -2px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-search-cancel-button,
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Reset (misc styling) */
|
||||
/* ----------------------------- */
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
white-space: pre-wrap;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
-ms-overflow-style: scrollbar;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
mark {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding: 0 2px;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 2px 4px;
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
color: #b11;
|
||||
}
|
||||
|
||||
pre code {
|
||||
padding: 0;
|
||||
background: none;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
sup,
|
||||
sub {
|
||||
vertical-align: 0;
|
||||
}
|
||||
|
||||
sup {
|
||||
bottom: 1ex;
|
||||
}
|
||||
|
||||
sub {
|
||||
top: 0.5ex;
|
||||
}
|
||||
|
||||
/**
|
||||
* quotes, blockquote and hr styling
|
||||
*/
|
||||
|
||||
blockquote {
|
||||
position: relative;
|
||||
padding-left: 3em;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
blockquote::before {
|
||||
content: "\201C";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
font-family: georgia, serif;
|
||||
font-size: 5em;
|
||||
height: .4em;
|
||||
line-height: .9;
|
||||
color: $quote-color;
|
||||
}
|
||||
|
||||
blockquote > footer {
|
||||
margin-top: .75em;
|
||||
font-size: 0.9em;
|
||||
color: rgba(0, 0, 0, .7);
|
||||
|
||||
&::before {
|
||||
content: "\2014 \0020";
|
||||
}
|
||||
}
|
||||
|
||||
q {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
q,
|
||||
.q {
|
||||
quotes: "“" "”" "‘" "’";
|
||||
|
||||
&:lang(fr) {
|
||||
quotes: "«\00a0" "\00a0»" "“" "”";
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
clear: both;
|
||||
height: 1px;
|
||||
margin: 1em 0 2em;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: #ccc;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
figure {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@if variable-exists(hyphens) and $hyphens==true {
|
||||
@media (max-width: ($small - 1)) {
|
||||
body,
|
||||
div,
|
||||
p,
|
||||
textarea,
|
||||
table,
|
||||
td,
|
||||
th,
|
||||
code,
|
||||
pre,
|
||||
samp {
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@if variable-exists(ie) and $ie==true {
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Reset (IE rules) */
|
||||
/* ----------------------------- */
|
||||
|
||||
@-ms-viewport {
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* hide overflow in IE
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,284 +0,0 @@
|
|||
/* -------------------------- */
|
||||
/* ==Responsive helpers */
|
||||
/* -------------------------- */
|
||||
|
||||
/* large screens */
|
||||
/* ------------- */
|
||||
|
||||
@media (min-width: $large) {
|
||||
|
||||
/* layouts for large screens */
|
||||
.large-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.large-visible {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.large-no-float {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.large-inbl {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* widths for large screens */
|
||||
.large-w25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
.large-w33 {
|
||||
width: 33.333333% !important;
|
||||
}
|
||||
|
||||
.large-w50 {
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
.large-w66 {
|
||||
width: 66.666666% !important;
|
||||
}
|
||||
|
||||
.large-w75 {
|
||||
width: 75% !important;
|
||||
}
|
||||
|
||||
.large-w100,
|
||||
.large-wauto {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
clear: none !important;
|
||||
width: auto !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* margins for large screens */
|
||||
.large-man,
|
||||
.large-ma0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* medium screens */
|
||||
/* -------------- */
|
||||
|
||||
@media (min-width: $medium) and (max-width: ($large - 1)) {
|
||||
|
||||
/* layouts for medium screens */
|
||||
.medium-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.medium-visible {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.medium-no-float {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.medium-inbl {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* widths for medium screens */
|
||||
.medium-w25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
.medium-w33 {
|
||||
width: 33.333333% !important;
|
||||
}
|
||||
|
||||
.medium-w50 {
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
.medium-w66 {
|
||||
width: 66.666666% !important;
|
||||
}
|
||||
|
||||
.medium-w75 {
|
||||
width: 75% !important;
|
||||
}
|
||||
|
||||
.medium-w100,
|
||||
.medium-wauto {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
clear: none !important;
|
||||
width: auto !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* margins for medium screens */
|
||||
.medium-man,
|
||||
.medium-ma0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* small screens */
|
||||
/* ------------- */
|
||||
|
||||
@media (min-width: $small) and (max-width: ($medium - 1)) {
|
||||
|
||||
/* layouts for small screens */
|
||||
.small-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.small-visible {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.small-no-float {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.small-inbl {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* widths for small screens */
|
||||
.small-w25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
.small-w33 {
|
||||
width: 33.333333% !important;
|
||||
}
|
||||
|
||||
.small-w50 {
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
.small-w66 {
|
||||
width: 66.666666% !important;
|
||||
}
|
||||
|
||||
.small-w75 {
|
||||
width: 75% !important;
|
||||
}
|
||||
|
||||
.small-w100,
|
||||
.small-wauto {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
clear: none !important;
|
||||
width: auto !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* margins for small screens */
|
||||
.small-man,
|
||||
.small-ma0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.small-pan,
|
||||
.small-pa0 {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* tiny screens */
|
||||
/* ------------ */
|
||||
|
||||
@media (max-width: $small - 1) {
|
||||
|
||||
/* quick small resolution reset */
|
||||
.mod,
|
||||
.col,
|
||||
fieldset {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
clear: none !important;
|
||||
width: auto !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* layouts for tiny screens */
|
||||
.tiny-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.tiny-visible {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.tiny-no-float {
|
||||
float: none;
|
||||
}
|
||||
|
||||
.tiny-inbl {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* widths for tiny screens */
|
||||
.tiny-w25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
.tiny-w33 {
|
||||
width: 33.333333% !important;
|
||||
}
|
||||
|
||||
.tiny-w50 {
|
||||
width: 50% !important;
|
||||
}
|
||||
|
||||
.tiny-w66 {
|
||||
width: 66.666666% !important;
|
||||
}
|
||||
|
||||
.tiny-w75 {
|
||||
width: 75% !important;
|
||||
}
|
||||
|
||||
.tiny-w100,
|
||||
.tiny-wauto {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
clear: none !important;
|
||||
width: auto !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* margins for tiny screens */
|
||||
.tiny-man,
|
||||
.tiny-ma0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.tiny-pan,
|
||||
.tiny-pa0 {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,440 +0,0 @@
|
|||
/* ---------------------------------- */
|
||||
/* ==Helpers */
|
||||
/* ---------------------------------- */
|
||||
|
||||
/* Typo Helpers */
|
||||
/* ------------- */
|
||||
|
||||
.u-bold {
|
||||
font-weight: $weight-bold;
|
||||
}
|
||||
|
||||
.u-italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.u-normal {
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.u-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.u-lowercase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.u-smaller {
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
.u-small {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.u-big {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.u-bigger {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.u-biggest {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.u-txt-wrap {
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.u-txt-ellipsis {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* text and contents alignment */
|
||||
|
||||
.txtleft,
|
||||
.u-txt-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.txtright,
|
||||
.u-txt-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.txtcenter,
|
||||
.u-txt-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* blocks that need to be placed under floats */
|
||||
|
||||
.clear,
|
||||
.u-clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* blocks that must contain floats */
|
||||
|
||||
.clearfix,
|
||||
.u-clearfix {
|
||||
&::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
}
|
||||
|
||||
/* simple blocks alignment */
|
||||
|
||||
.left,
|
||||
.u-left {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.right,
|
||||
.u-right {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.center,
|
||||
.u-center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* Global Micro Layout */
|
||||
/* ------------------- */
|
||||
|
||||
/* "BFC" Block Formating Context */
|
||||
|
||||
.bfc,
|
||||
.u-bfc {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* floating elements */
|
||||
|
||||
.fl,
|
||||
.u-fl {
|
||||
float: left;
|
||||
}
|
||||
|
||||
img.fl,
|
||||
img.u-fl {
|
||||
margin-right: $spacer-small;
|
||||
}
|
||||
|
||||
.fr,
|
||||
.u-fr {
|
||||
float: right;
|
||||
}
|
||||
|
||||
img.fr,
|
||||
img.u-fr {
|
||||
margin-left: $spacer-small;
|
||||
}
|
||||
|
||||
img.fl,
|
||||
img.fr,
|
||||
img.u-fl,
|
||||
img.u-fr {
|
||||
margin-bottom: $spacer-tiny;
|
||||
}
|
||||
|
||||
/* inline-block */
|
||||
|
||||
.inbl,
|
||||
.u-inbl {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* State Helpers */
|
||||
/* ------------- */
|
||||
|
||||
/* invisible for all */
|
||||
.is-hidden,
|
||||
.js-hidden,
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* hidden but not for an assistive technology like a screen reader, Yahoo! method */
|
||||
// mixin in `abstracts/_mixins.scss`
|
||||
.visually-hidden {
|
||||
@include visually-hidden;
|
||||
}
|
||||
@include respond-to("small") {
|
||||
.small-visually-hidden {
|
||||
@include visually-hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.is-disabled,
|
||||
.js-disabled,
|
||||
[disabled],
|
||||
.is-disabled ~ label,
|
||||
[disabled] ~ label {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed !important;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
ul {
|
||||
&.is-unstyled,
|
||||
&.unstyled {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Width Helpers */
|
||||
/* ------------- */
|
||||
|
||||
/* blocks widths (percentage and pixels) */
|
||||
$i: 100;
|
||||
|
||||
@while $i > 0 {
|
||||
.w#{$i} {
|
||||
width: $i * 1%;
|
||||
}
|
||||
$i: $i - 5;
|
||||
}
|
||||
.w66 {
|
||||
width: calc(100% / 3 * 2);
|
||||
}
|
||||
.w33 {
|
||||
width: calc(100% / 3);
|
||||
}
|
||||
|
||||
$i: 1000;
|
||||
|
||||
.wauto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.w960p {
|
||||
width: 960px;
|
||||
}
|
||||
|
||||
.mw960p {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.w1140p {
|
||||
width: 1140px;
|
||||
}
|
||||
|
||||
.mw1140p {
|
||||
max-width: 1140px;
|
||||
}
|
||||
|
||||
@while $i > 0 {
|
||||
.w#{$i}p {
|
||||
width: $i * 1px;
|
||||
}
|
||||
$i: $i - 50;
|
||||
}
|
||||
|
||||
/* Spacing Helpers */
|
||||
/* --------------- */
|
||||
|
||||
.man,
|
||||
.ma0 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pan,
|
||||
.pa0 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mas {
|
||||
margin: $spacer-small;
|
||||
}
|
||||
|
||||
.mam {
|
||||
margin: $spacer-medium;
|
||||
}
|
||||
|
||||
.mal {
|
||||
margin: $spacer-large;
|
||||
}
|
||||
|
||||
.pas {
|
||||
padding: $spacer-small;
|
||||
}
|
||||
|
||||
.pam {
|
||||
padding: $spacer-medium;
|
||||
}
|
||||
|
||||
.pal {
|
||||
padding: $spacer-large;
|
||||
}
|
||||
|
||||
.mtn,
|
||||
.mt0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.mts {
|
||||
margin-top: $spacer-small;
|
||||
}
|
||||
|
||||
.mtm {
|
||||
margin-top: $spacer-medium;
|
||||
}
|
||||
|
||||
.mtl {
|
||||
margin-top: $spacer-large;
|
||||
}
|
||||
|
||||
.mrn,
|
||||
.mr0 {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mrs {
|
||||
margin-right: $spacer-small;
|
||||
}
|
||||
|
||||
.mrm {
|
||||
margin-right: $spacer-medium;
|
||||
}
|
||||
|
||||
.mrl {
|
||||
margin-right: $spacer-large;
|
||||
}
|
||||
|
||||
.mbn,
|
||||
.mb0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.mbs {
|
||||
margin-bottom: $spacer-small;
|
||||
}
|
||||
|
||||
.mbm {
|
||||
margin-bottom: $spacer-medium;
|
||||
}
|
||||
|
||||
.mbl {
|
||||
margin-bottom: $spacer-large;
|
||||
}
|
||||
|
||||
.mln,
|
||||
.ml0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.mls {
|
||||
margin-left: $spacer-small;
|
||||
}
|
||||
|
||||
.mlm {
|
||||
margin-left: $spacer-medium;
|
||||
}
|
||||
|
||||
.mll {
|
||||
margin-left: $spacer-large;
|
||||
}
|
||||
|
||||
.mauto {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mtauto {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.mrauto {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mbauto {
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.mlauto {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.ptn,
|
||||
.pt0 {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.pts {
|
||||
padding-top: $spacer-small;
|
||||
}
|
||||
|
||||
.ptm {
|
||||
padding-top: $spacer-medium;
|
||||
}
|
||||
|
||||
.ptl {
|
||||
padding-top: $spacer-large;
|
||||
}
|
||||
|
||||
.prn,
|
||||
.pr0 {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.prs {
|
||||
padding-right: $spacer-small;
|
||||
}
|
||||
|
||||
.prm {
|
||||
padding-right: $spacer-medium;
|
||||
}
|
||||
|
||||
.prl {
|
||||
padding-right: $spacer-large;
|
||||
}
|
||||
|
||||
.pbn,
|
||||
.pb0 {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.pbs {
|
||||
padding-bottom: $spacer-small;
|
||||
}
|
||||
|
||||
.pbm {
|
||||
padding-bottom: $spacer-medium;
|
||||
}
|
||||
|
||||
.pbl {
|
||||
padding-bottom: $spacer-large;
|
||||
}
|
||||
|
||||
.pln,
|
||||
.pl0 {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.pls {
|
||||
padding-left: $spacer-small;
|
||||
}
|
||||
|
||||
.plm {
|
||||
padding-left: $spacer-medium;
|
||||
}
|
||||
|
||||
.pll {
|
||||
padding-left: $spacer-large;
|
||||
}
|
||||
|
|
@ -1,248 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==WordPress reset */
|
||||
/* ----------------------------- */
|
||||
|
||||
/*
|
||||
Author: Geoffrey Crofte, Alsacréations
|
||||
Contributors: Automattic, Geoffrey Crofte
|
||||
Description: Reset styles for WordPress usage of KNACSS
|
||||
*/
|
||||
|
||||
// current menu elements
|
||||
.current_page_item > a {
|
||||
}
|
||||
.current-menu-item > a {
|
||||
}
|
||||
.current_page_ancestor > a {
|
||||
}
|
||||
|
||||
// blocks of content navigation
|
||||
.comment-navigation,
|
||||
.paging-navigation,
|
||||
.post-navigation {
|
||||
overflow: hidden;
|
||||
margin: 0 0 1.5em;
|
||||
|
||||
& .nav-previous {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
& .nav-next {
|
||||
float: right;
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// class in img elements
|
||||
.alignnone {
|
||||
margin: .25em 1.5em 1.5em 0;
|
||||
}
|
||||
|
||||
.aligncenter {
|
||||
clear: both;
|
||||
display: block;
|
||||
margin: 1.5em auto;
|
||||
}
|
||||
|
||||
.alignleft {
|
||||
float: left;
|
||||
margin: 0 1.5em .25em 0;
|
||||
}
|
||||
|
||||
.alignright {
|
||||
float: right;
|
||||
margin: 0 0 .25em 1.5em;
|
||||
}
|
||||
|
||||
.entry-content,
|
||||
.comment-content {
|
||||
clear: both;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
|
||||
.widget + .widget {
|
||||
margin: 1.5em 0 0;
|
||||
}
|
||||
|
||||
// usage example:
|
||||
.widget select {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* === 5.1 Posts - post_class === */
|
||||
|
||||
// featured content
|
||||
.sticky {
|
||||
}
|
||||
|
||||
// attachment post
|
||||
.attachment {
|
||||
}
|
||||
|
||||
// format of post
|
||||
.format- {
|
||||
&aside {
|
||||
}
|
||||
&gallery {
|
||||
}
|
||||
&link {
|
||||
}
|
||||
&image {
|
||||
}
|
||||
"e {
|
||||
}
|
||||
&status {
|
||||
}
|
||||
&video {
|
||||
}
|
||||
&chat {
|
||||
}
|
||||
}
|
||||
|
||||
// class for a tag
|
||||
.tag- {
|
||||
&name-of-tag {
|
||||
}
|
||||
}
|
||||
|
||||
// class for category
|
||||
.category- {
|
||||
&name-of-category {
|
||||
}
|
||||
}
|
||||
|
||||
/* === 5.2 Pages - body_class === */
|
||||
|
||||
// front page
|
||||
.home {
|
||||
// if display posts
|
||||
&.blog {
|
||||
}
|
||||
|
||||
// if static page
|
||||
&.page {
|
||||
}
|
||||
}
|
||||
|
||||
// page displays posts
|
||||
.blog {
|
||||
// if is frontpage
|
||||
&.home {
|
||||
}
|
||||
|
||||
// if static page
|
||||
&.page {
|
||||
}
|
||||
}
|
||||
|
||||
// simple page
|
||||
.page {
|
||||
}
|
||||
|
||||
// page of single post
|
||||
.single {
|
||||
}
|
||||
|
||||
// page of archives
|
||||
.archive {
|
||||
}
|
||||
|
||||
// page of search
|
||||
.search {
|
||||
// if has results
|
||||
.search-results {
|
||||
}
|
||||
|
||||
// if has no results
|
||||
.search-no-results {
|
||||
}
|
||||
}
|
||||
|
||||
// page 404
|
||||
.error404 {
|
||||
}
|
||||
|
||||
// user logged in
|
||||
.logged-in {
|
||||
}
|
||||
|
||||
// text direction if right-to-left
|
||||
// prefer rtl.css: http://codex.wordpress.org/Right-to-Left_Language_Support
|
||||
.rtl {
|
||||
}
|
||||
|
||||
/* === 5.3 Posts and Pages - Contents === */
|
||||
|
||||
.hentry {
|
||||
margin: 0 0 1.5em;
|
||||
}
|
||||
|
||||
.page-content,
|
||||
.entry-content,
|
||||
.entry-summary {
|
||||
margin: 1.5em 0 0;
|
||||
}
|
||||
|
||||
.page-links {
|
||||
clear: both;
|
||||
margin: 0 0 1.5em;
|
||||
}
|
||||
|
||||
.comment-content a {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.bypostauthor {
|
||||
// some make-the-logo-bigger styles
|
||||
}
|
||||
|
||||
img.wp-smiley {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.wp-caption {
|
||||
max-width: 100%;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.wp-caption img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.wp-caption-text {
|
||||
margin: 1em 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gallery {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
|
||||
@for $i from 2 through 9 {
|
||||
.gallery-columns-#{$i} & {
|
||||
$w: floor(10000 / $i) / 100;
|
||||
max-width: unquote($w + '%');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-caption {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1,146 +0,0 @@
|
|||
/* ---------------------------------- */
|
||||
/* ==Grillade v6 */
|
||||
/* ---------------------------------- */
|
||||
/* IMPORTANT : this is the KNACSS v6 old Grid System based on Flexbox */
|
||||
/* You only need it for projects on older browsers (IE11-) */
|
||||
|
||||
// Responsive breakpoints variables
|
||||
|
||||
// Warning : you should use your own values, regardless of the devices
|
||||
// Best practice : (max-width: ($BP - 1)) and (min-width: $BP)
|
||||
|
||||
$tiny: 480px !default; // or 'em' if you prefer, of course
|
||||
$small: 576px !default;
|
||||
$medium: 768px !default;
|
||||
$large: 992px !default;
|
||||
$extra-large: 1200px !default;
|
||||
$cols: 12 !default;
|
||||
|
||||
// gutter values for grid layouts. Unit can be: %, px, em, rem
|
||||
$grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
|
||||
// IEfixing, see
|
||||
// https://github.com/alsacreations/KNACSS/issues/133;
|
||||
$iefix: 0.01px;
|
||||
@media (min-width: $small) {
|
||||
[class*=" grillade-"],
|
||||
[class^="grillade-"] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
& > * {
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Multi-line grid constructor
|
||||
// example : .grid-perso { @include grid(12, 3rem); }
|
||||
@mixin grid($grid-number: 1, $own-gutter: 0) {
|
||||
& > * {
|
||||
width: calc(100% / #{$grid-number} - #{$iefix});
|
||||
}
|
||||
@each $affix, $size in $grid-gutters {
|
||||
&.has-gutter#{$affix} {
|
||||
margin-right: -$size / 2;
|
||||
margin-left: -$size / 2;
|
||||
|
||||
& > * {
|
||||
width: calc(100% / #{$grid-number} - #{$size} - #{$iefix});
|
||||
margin-right: $size / 2;
|
||||
margin-left: $size / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@if ($own-gutter != 0) {
|
||||
margin-right: -$own-gutter / 2;
|
||||
margin-left: -$own-gutter / 2;
|
||||
|
||||
& > * {
|
||||
width: calc(100% / #{$grid-number} - #{$own-gutter} - #{$iefix});
|
||||
margin-right: $own-gutter / 2;
|
||||
margin-left: $own-gutter / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mono-line grid constructor (.grid)
|
||||
@media (min-width: $small) {
|
||||
.grillade,
|
||||
.grillade--reverse {
|
||||
display: flex;
|
||||
|
||||
& > * {
|
||||
flex: 1 1 0%;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
@each $affix, $size in $grid-gutters {
|
||||
&.has-gutter#{$affix} > * + * {
|
||||
margin-left: calc(#{$size} - #{$iefix});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Constructing grids : will be compiled in CSS
|
||||
@media (min-width: $small) {
|
||||
@for $i from 2 through $cols {
|
||||
[class*="grillade-#{$i}"] {
|
||||
@include grid(#{$i}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Grid offsets
|
||||
.push {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
.pull {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
// Grid order
|
||||
.item-first {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.item-last {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
[class*="grillade-"][class*="--reverse"] {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
// sizing individual children
|
||||
@media (min-width: $small) {
|
||||
@each $flow, $divider in ("full" "1"), ("one-half" "2"), ("one-third" "3"), ("one-quarter" "4"), ("one-fifth" "5"), ("one-sixth" "6"), ("two-thirds" "3 * 2"), ("three-quarters" "4 * 3"), ("five-sixths" "6 * 5") {
|
||||
.#{$flow} {
|
||||
flex: 0 0 auto;
|
||||
width: calc(100% / #{$divider} - #{$iefix});
|
||||
}
|
||||
@each $affix, $size in $grid-gutters {
|
||||
.has-gutter#{$affix} > .#{$flow} {
|
||||
width: calc(100% / #{$divider} - #{$size} - #{$iefix});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Responsive Small Breakpoint */
|
||||
// -small-X suffix means "X columns on small-medium screen"
|
||||
// example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until medium) then 4 columns
|
||||
@media (min-width: $small) and (max-width: ($medium - 1)) {
|
||||
@for $i from 1 through 4 {
|
||||
[class*="-small-#{$i}"] {
|
||||
& > * {
|
||||
width: calc(100% / #{$i} - #{$iefix});
|
||||
}
|
||||
@each $affix, $size in $grid-gutters {
|
||||
&.has-gutter#{$affix} > * {
|
||||
width: calc(100% / #{$i} - #{$size} - #{$iefix});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,162 +0,0 @@
|
|||
/* --------------------------------------- */
|
||||
/* ==Grillade : ultra light Grid System */
|
||||
/* --------------------------------------- */
|
||||
// WARNING: THIS IS NOT A COMPLETE GRID FRAMEWORK, just ultra light Grid System
|
||||
// if you need complex Grid :
|
||||
// 1- use vanilla CSS Grid Layout spec (perfect for you)
|
||||
// 2- use Bootstrap (good luck)
|
||||
|
||||
// use these variables only for a standalone Grillade
|
||||
// in KNACSS, you shall modify variables file instead
|
||||
$tiny : 480px !default;
|
||||
$medium : 768px !default;
|
||||
$large : 992px !default;
|
||||
$cols : 12 !default;
|
||||
|
||||
// classic Grid
|
||||
[class*=" grillade-"],
|
||||
[class^="grillade-"] {
|
||||
@media (min-width: $tiny) {
|
||||
display: grid;
|
||||
|
||||
// gutters
|
||||
@if variable_exists(grid-gutters) {
|
||||
$gutter: $grid-gutters !global;
|
||||
}
|
||||
@else {
|
||||
$gutter: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !global;
|
||||
}
|
||||
@each $affix, $size in $gutter {
|
||||
&.has-gutter#{$affix} {
|
||||
grid-gap: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// autogrid
|
||||
.autogrillade,
|
||||
.grillade {
|
||||
@media (min-width: $tiny) {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 1fr;
|
||||
|
||||
// gutters
|
||||
@if variable_exists(grid-gutters) {
|
||||
$gutter: $grid-gutters !global;
|
||||
|
||||
} @else {
|
||||
$gutter: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !global;
|
||||
}
|
||||
@each $affix, $size in $gutter {
|
||||
&.has-gutter#{$affix} {
|
||||
grid-column-gap: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// grid constructor (.grillade-2 to .grillade-$cols)
|
||||
@for $i from 2 through $cols {
|
||||
[class*="grillade-#{$i}"] {
|
||||
grid-template-columns: repeat(#{$i}, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
// grid items constructor (.col-1 to .col-$cols, .row-1 to .row-$cols)
|
||||
@for $i from 1 through $cols {
|
||||
[class*="col-#{$i}"] {
|
||||
grid-column: auto / span #{$i};
|
||||
}
|
||||
|
||||
[class*="row-#{$i}"] {
|
||||
grid-row: auto / span #{$i};
|
||||
}
|
||||
}
|
||||
|
||||
/* medium intermediate breakpoints */
|
||||
// -medium-X suffix means "X columns when < large screen"
|
||||
// example : .grillade-4-medium-2 will be 1 column (< tiny) then 2 columns (< large) then 4 columns
|
||||
@media (min-width: $tiny) and (max-width: ($large - 1)) {
|
||||
@for $i from 1 through 4 {
|
||||
[class*="grillade-"][class*="-medium-#{$i}"] {
|
||||
grid-template-columns: repeat(#{$i}, 1fr);
|
||||
}
|
||||
|
||||
[class*="col-"][class*="-medium-#{$i}"] {
|
||||
grid-column: auto / span #{$i};
|
||||
}
|
||||
}
|
||||
|
||||
[class*="-medium-all"] {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
/* small intermediate breakpoints */
|
||||
// -small-X suffix means "X columns when < medium screen"
|
||||
// example : .grillade-4-small-2 will be 1 column (< tiny) then 2 columns (< medium) then 4 columns
|
||||
@media (min-width: $tiny) and (max-width: ($medium - 1)) {
|
||||
@for $i from 1 through 4 {
|
||||
[class*="grillade-"][class*="-small-#{$i}"] {
|
||||
grid-template-columns: repeat(#{$i}, 1fr);
|
||||
}
|
||||
|
||||
[class*="col-"][class*="-small-#{$i}"] {
|
||||
grid-column: auto / span #{$i};
|
||||
}
|
||||
}
|
||||
|
||||
[class*="-small-all"] {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
// grid overall alignment
|
||||
[class*="-start"] {
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
[class*="-end"] {
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
[class*="-center"] {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
[class*="-space-between"] {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
[class*="-space-around"] {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
[class*="-space-evenly"] {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
// grid order
|
||||
.item-first {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.item-last {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
// grid offset
|
||||
.grid-offset {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// spanning all columns or rows
|
||||
.col-all {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.row-all {
|
||||
grid-row: 1 / -1;
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Alerts */
|
||||
/* ----------------------------- */
|
||||
/* use .alert-- classes for variants */
|
||||
|
||||
.alert {
|
||||
padding: $spacer-small $spacer-small;
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 0;
|
||||
color: $color-base;
|
||||
border-radius: $border-radius;
|
||||
background-color: $color-muted;
|
||||
|
||||
& a {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
@each $name, $background-color, $color, $border in $variants-list {
|
||||
&--#{$name} {
|
||||
@extend .alert;
|
||||
background-color: $background-color;
|
||||
color: $color;
|
||||
box-shadow: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// alert state variants
|
||||
.alert {
|
||||
&--small {
|
||||
font-size: $font-size-base - 0.4rem;
|
||||
}
|
||||
|
||||
&--big {
|
||||
font-size: $font-size-base + 0.4rem;
|
||||
}
|
||||
|
||||
&--block {
|
||||
width: 100% !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&--disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Arrows */
|
||||
/* ----------------------------- */
|
||||
/* see https://knacss.com/styleguide.html#arrows */
|
||||
|
||||
[class*="icon-arrow--"] {
|
||||
vertical-align: middle;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
mask-size: cover;
|
||||
background-color: $arrow-color;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-arrow--down::after {
|
||||
mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.icon-arrow--up::after {
|
||||
mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%208.596%20L%203.523%2014.973%20C%202.464%2015.935%200.495%2013.72%201.505%2012.791%20L%201.505%2012.791%20L%208.494%205.799%20C%209.138%205.212%2010.655%205.193%2011.29%205.799%20L%2011.29%205.799%20L%2018.49%2012.791%20C%2019.557%2013.809%2017.364%2015.882%2016.262%2014.837%20L%2016.262%2014.837%20L%209.96%208.596%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.icon-arrow--right::after {
|
||||
mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%2011.685%2010.321%20L%205.308%2016.758%20C%204.346%2017.817%206.561%2019.786%207.49%2018.776%20L%207.49%2018.776%20L%2014.482%2011.787%20C%2015.069%2011.142%2015.088%209.626%2014.482%208.991%20L%2014.482%208.991%20L%207.49%201.791%20C%206.472%200.724%204.399%202.916%205.444%204.019%20L%205.444%204.019%20L%2011.685%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.icon-arrow--left::after {
|
||||
mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%208.315%2010.321%20L%2014.692%2016.758%20C%2015.654%2017.817%2013.439%2019.786%2012.51%2018.776%20L%2012.51%2018.776%20L%205.518%2011.787%20C%204.931%2011.142%204.912%209.626%205.518%208.991%20L%205.518%208.991%20L%2012.51%201.791%20C%2013.528%200.724%2015.601%202.916%2014.556%204.019%20L%2014.556%204.019%20L%208.315%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
|
||||
}
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Badges */
|
||||
/* ----------------------------- */
|
||||
/* use .badge-- classes for variants */
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: $spacer-tiny;
|
||||
border-radius: 50%;
|
||||
color: $color-base;
|
||||
background-color: $color-muted;
|
||||
line-height: 1;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding-top: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
@each $name, $background-color, $color, $border in $variants-list {
|
||||
&--#{$name} {
|
||||
@extend .badge;
|
||||
background-color: $background-color;
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// badge state variants
|
||||
.badge {
|
||||
&--small {
|
||||
font-size: $font-size-base - 0.4rem;
|
||||
}
|
||||
|
||||
&--big {
|
||||
font-size: $font-size-base + 0.4rem;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&--disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
85
sass/components/_burger.scss
Executable file
85
sass/components/_burger.scss
Executable file
|
|
@ -0,0 +1,85 @@
|
|||
/*
|
||||
* component nav "burger" button
|
||||
*/
|
||||
/*
|
||||
* HTML template example:
|
||||
* <button class="burger-button" type="button" role="button" aria-label="open/close navigation"><i></i></button>
|
||||
* activate it with a JS toggle-class to .is-active
|
||||
* see doc : https: //www.knacss.com/doc.html#buttons
|
||||
*/
|
||||
|
||||
/*
|
||||
* burger variables (you can change them)
|
||||
*/
|
||||
|
||||
$burger-color : #333;
|
||||
$burger-background : transparent;
|
||||
$burger-hover-background : transparent;
|
||||
$burger-size : 2.6rem;
|
||||
$burger-weight : 5px; // size of stripes
|
||||
$burger-padding : 0;
|
||||
|
||||
/*
|
||||
* burger button styles
|
||||
*/
|
||||
|
||||
.burger-button {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.burger-button > * {
|
||||
display: inline-flex;
|
||||
vertical-align: top;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
height: $burger-size;
|
||||
width: $burger-size;
|
||||
padding: $burger-padding;
|
||||
background-color: $burger-background;
|
||||
background-image: linear-gradient($burger-color, $burger-color);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-origin: content-box;
|
||||
background-size: 100% $burger-weight;
|
||||
transition: .25s;
|
||||
transition-property: transform, background;
|
||||
will-change: transform, background;
|
||||
}
|
||||
|
||||
.burger-button > *::before,
|
||||
.burger-button > *::after {
|
||||
content: "";
|
||||
height: $burger-weight;
|
||||
background: $burger-color;
|
||||
transition: .25s;
|
||||
transition-property: transform, top;
|
||||
will-change: transform, top;
|
||||
}
|
||||
|
||||
.burger-button:hover > * {
|
||||
background-color: $burger-hover-background;
|
||||
}
|
||||
|
||||
.burger-button:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.burger-button.is-active > * {
|
||||
background-image: none;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.burger-button.is-active>*::before {
|
||||
transform: translateY(50%) rotate3d(0, 0, 1, 45deg);
|
||||
}
|
||||
|
||||
.burger-button.is-active>*::after {
|
||||
transform: translateY(-50%) rotate3d(0, 0, 1, -45deg);
|
||||
}
|
||||
71
sass/components/_button.scss
Executable file
71
sass/components/_button.scss
Executable file
|
|
@ -0,0 +1,71 @@
|
|||
/*
|
||||
* basic button component
|
||||
*/
|
||||
/*
|
||||
* HTML template example:
|
||||
* preferably use <button> for buttons !
|
||||
* use .button or .btn (for structure) and .btn-- (for variants) (see appearance mixin)
|
||||
*/
|
||||
|
||||
/*
|
||||
* button reset
|
||||
*/
|
||||
|
||||
%btn {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: $spacer-small $spacer-small-plus;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: 0.25s;
|
||||
transition-property: box-shadow, background-color, color, border;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.button {
|
||||
@extend %btn;
|
||||
|
||||
&:focus {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// button state variants
|
||||
.btn,
|
||||
.button {
|
||||
&--small {
|
||||
padding: $spacer-tiny-plus $spacer-small;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
&--big {
|
||||
padding: $spacer-small-plus $spacer-medium;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
&--block {
|
||||
width: 100% !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&--unstyled {
|
||||
padding: 0;
|
||||
border: none;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,156 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Buttons styling */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* preferably use <button> for buttons !*/
|
||||
/* use .btn-- or .button-- classes for variants */
|
||||
|
||||
%btn {
|
||||
display: inline-block;
|
||||
padding: $spacer-small $spacer-small-plus;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: 0.25s;
|
||||
transition-property: box-shadow, background-color, color, border;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
color: $color-base;
|
||||
border: none;
|
||||
border-radius: $border-radius;
|
||||
background-color: $color-muted;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.button,
|
||||
[type="button"],
|
||||
button {
|
||||
@extend %btn;
|
||||
|
||||
&:focus {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.btn,
|
||||
.button {
|
||||
@each $name, $background-color, $color, $border in $variants-list {
|
||||
&--#{$name} {
|
||||
@extend %btn;
|
||||
background-color: $background-color;
|
||||
color: $color;
|
||||
box-shadow: $border;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: darken( $background-color, 10% );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// button state variants
|
||||
.btn,
|
||||
.button {
|
||||
&--small {
|
||||
padding: $spacer-tiny-plus $spacer-small;
|
||||
font-size: .8em;
|
||||
}
|
||||
|
||||
&--big {
|
||||
padding: $spacer-small-plus $spacer-medium;
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
&--block {
|
||||
width: 100% !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&--unstyled {
|
||||
padding: 0;
|
||||
border: none;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// nav "burger" button
|
||||
// activate it with a JS toggle-class to .is-active
|
||||
// recommended HTML : <button class="nav-button" type="button" role="button" aria-label="open/close navigation"><i></i></button>
|
||||
// see doc : https://knacss.com/styleguide.html#buttons
|
||||
.nav-button {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
|
||||
& > * {
|
||||
display: inline-flex;
|
||||
vertical-align: top;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
height: $burger-size;
|
||||
width: $burger-size;
|
||||
padding: $burger-padding;
|
||||
background-color: $burger-background;
|
||||
background-image: linear-gradient($burger-color, $burger-color);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-origin: content-box;
|
||||
background-size: 100% $burger-weight;
|
||||
transition: .25s;
|
||||
transition-property: transform, background;
|
||||
will-change: transform, background;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
height: $burger-weight;
|
||||
background: $burger-color;
|
||||
transition: .25s;
|
||||
transition-property: transform, top;
|
||||
will-change: transform, top;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
& > * {
|
||||
background-color: $burger-hover-background;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
& > * {
|
||||
background-image: none;
|
||||
justify-content: center;
|
||||
|
||||
&::before {
|
||||
transform: translateY(50%) rotate3d(0,0,1,45deg);
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: translateY(-50%) rotate3d(0,0,1,-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
150
sass/components/_checkbox.scss
Normal file → Executable file
150
sass/components/_checkbox.scss
Normal file → Executable file
|
|
@ -1,119 +1,59 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Checkbox, radio, switch */
|
||||
/* ----------------------------- */
|
||||
/* use .checkbox class on input type=checkbox */
|
||||
/* recommended HTML : <input type="checkbox" class="checkbox" id="c1"><label for="c1">click here</label> */
|
||||
/* use .radio class on input type=radio */
|
||||
/* recommended HTML : <input type="radio" class="radio" name="radio" id="r1"><label for="r1">Click here</label> */
|
||||
/* use .switch class on input type=checkbox */
|
||||
// <input type="checkbox" class="switch" id="switch"><label for="switch" class="label">slide to unlock</label>
|
||||
/*
|
||||
* component checkbox
|
||||
*/
|
||||
/*
|
||||
* HTML template example:
|
||||
* <input type="checkbox" class="checkbox" id="c1">
|
||||
* <label for="c1">click here</label>
|
||||
*/
|
||||
|
||||
/*
|
||||
* checkbox variables (you can change them)
|
||||
*/
|
||||
|
||||
$checkbox-color: $white;
|
||||
$checkbox-background: $color-alpha;
|
||||
$checkbox-size: 2rem;
|
||||
$checkbox-border-radius: 4px;
|
||||
|
||||
/*
|
||||
* checkbox styles
|
||||
*/
|
||||
|
||||
// common styles
|
||||
.checkbox {
|
||||
border-radius: $checkbox-border-radius;
|
||||
}
|
||||
|
||||
.switch {
|
||||
border-radius: $switch-border-radius;
|
||||
}
|
||||
|
||||
.radio {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.switch,
|
||||
.checkbox,
|
||||
.radio {
|
||||
appearance: none;
|
||||
vertical-align: text-bottom;
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
|
||||
& ~ label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::-ms-check {
|
||||
display: none; // unstyle IE checkboxes
|
||||
}
|
||||
}
|
||||
|
||||
// switch styling
|
||||
.switch {
|
||||
width: $switch-size *2;
|
||||
height: $switch-size;
|
||||
line-height: $switch-size;
|
||||
font-size: 70%;
|
||||
box-shadow: inset -#{$switch-size} 0 0 $switch-background,
|
||||
inset 0 0 0 1px $switch-background;
|
||||
transition: box-shadow .15s;
|
||||
background-color: $switch-color;
|
||||
&::before,
|
||||
&::after {
|
||||
font-weight: bold;
|
||||
color: $switch-color;
|
||||
}
|
||||
&::before {
|
||||
content: "✕";
|
||||
float: right;
|
||||
margin-right: $switch-size /3;
|
||||
}
|
||||
&:checked {
|
||||
box-shadow: inset #{$switch-size} 0 0 $color-success,
|
||||
inset 0 0 0 1px $color-success;
|
||||
&::before {
|
||||
content: "✓";
|
||||
float: left;
|
||||
margin-left: $switch-size /3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// checkbox styling
|
||||
.checkbox {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
box-shadow: inset 0 0 0 1px $checkbox-background;
|
||||
vertical-align: text-bottom;
|
||||
outline: 0;
|
||||
box-shadow: inset 0 0 0 1px $color-alpha;
|
||||
background-color: $checkbox-color;
|
||||
transition: background-color .15s;
|
||||
&:checked {
|
||||
$red: red($checkbox-color);
|
||||
$green: green($checkbox-color);
|
||||
$blue: blue($checkbox-color);
|
||||
$rgb: rgb($red, $green, $blue);
|
||||
$slice: str-slice(ie-hex-str($rgb), 4);
|
||||
$first: "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220%22%20y%3D%220%22%20viewBox%3D%220%200%208%208%22%20enable-background%3D%22new%200%200%208%208%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20fill%3D%22%23";
|
||||
$last: "%22%20d%3D%22M6.4%2C1L5.7%2C1.7L2.9%2C4.5L2.1%2C3.7L1.4%2C3L0%2C4.4l0.7%2C0.7l1.5%2C1.5l0.7%2C0.7l0.7-0.7l3.5-3.5l0.7-0.7L6.4%2C1L6.4%2C1z%22%20%2F%3E%0A%3C%2Fsvg%3E";
|
||||
$combo: "#{$first}#{$slice}#{$last}";
|
||||
background-image: url($combo);
|
||||
transition: background-color 0.15s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox + label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.checkbox:disabled + label {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.checkbox:checked {
|
||||
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=");
|
||||
background-size: 60% 60%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: $checkbox-background;
|
||||
}
|
||||
}
|
||||
|
||||
// radio styling
|
||||
.radio {
|
||||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
background-size: 0% 0%;
|
||||
transition: background-size .15s;
|
||||
box-shadow: inset 0 0 0 1px $radio-color;
|
||||
background-color: $radio-background;
|
||||
&:checked {
|
||||
$red: red($radio-color);
|
||||
$green: green($radio-color);
|
||||
$blue: blue($radio-color);
|
||||
$rgb: rgb($red, $green, $blue);
|
||||
$slice: str-slice(ie-hex-str($rgb), 4);
|
||||
$first: "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%22100%22%20height%3D%22100%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%23";
|
||||
$last: "%22/%3E%3C/svg%3E";
|
||||
$combo: "#{$first}#{$slice}#{$last}";
|
||||
background-image: url($combo);
|
||||
background-size: 90% 90%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: $radio-background;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Forms styling */
|
||||
/* ----------------------------- */
|
||||
|
||||
[type="color"],
|
||||
[type="date"],
|
||||
[type="datetime-local"],
|
||||
[type="email"],
|
||||
[type="month"],
|
||||
[type="number"],
|
||||
[type="password"],
|
||||
[type="search"],
|
||||
[type="submit"],
|
||||
[type="tel"],
|
||||
[type="text"],
|
||||
[type="time"],
|
||||
[type="url"],
|
||||
[type="week"],
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
border: 0;
|
||||
box-shadow: 0 0 0 1px $forms-color inset;
|
||||
color: $color-base;
|
||||
vertical-align: middle;
|
||||
padding: $spacer-tiny $spacer-small;
|
||||
margin: 0;
|
||||
transition: 0.25s;
|
||||
transition-property: box-shadow, background-color, color, border;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
[type="submit"] {
|
||||
background-color: $forms-color;
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[readonly] {
|
||||
background-color: $color-muted;
|
||||
}
|
||||
|
||||
select {
|
||||
padding-right: 2rem;
|
||||
border-radius: $border-radius;
|
||||
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
|
||||
background-position: right .6rem center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.2rem;
|
||||
}
|
||||
|
||||
/* hiding IE11 arrow */
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 5em;
|
||||
vertical-align: top;
|
||||
resize: vertical;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* 'x' appears on right of search input when text is entered. This removes it */
|
||||
[type="search"] {
|
||||
&::-webkit-search-decoration,
|
||||
&::-webkit-search-cancel-button,
|
||||
&::-webkit-search-results-button,
|
||||
&::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
input:-moz-placeholder,
|
||||
textarea:-moz-placeholder {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: #777;
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Media object */
|
||||
/* ----------------------------- */
|
||||
/* recommended HTML : <div class="media"><img class="media-figure"><div class="media-content"></div></div> */
|
||||
/* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
|
||||
|
||||
@media (min-width: $tiny) {
|
||||
.media {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
&-content {
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
// vertical align image
|
||||
&-figure--center {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
// reverse variant
|
||||
&--reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
60
sass/components/_quote.scss
Executable file
60
sass/components/_quote.scss
Executable file
|
|
@ -0,0 +1,60 @@
|
|||
/*
|
||||
* component quote
|
||||
*/
|
||||
/*
|
||||
* HTML template example:
|
||||
* <blockquote>
|
||||
* <p>Lorem Elsass Ipsum mitt picon bière</p>
|
||||
* </blockquote>
|
||||
*/
|
||||
|
||||
/*
|
||||
* quotes variables (you can change them)
|
||||
*/
|
||||
|
||||
$blockquote-color: #454d5d;
|
||||
|
||||
/*
|
||||
* quotes styles
|
||||
*/
|
||||
|
||||
blockquote {
|
||||
position: relative;
|
||||
padding-left: 3em;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
blockquote::before {
|
||||
content: "\201C";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
font-family: georgia, serif;
|
||||
font-size: 5em;
|
||||
height: .4em;
|
||||
line-height: .9;
|
||||
color: $blockquote-color;
|
||||
}
|
||||
|
||||
blockquote > footer {
|
||||
margin-top: .75em;
|
||||
font-size: 0.9em;
|
||||
color: rgba(0, 0, 0, .7);
|
||||
|
||||
&::before {
|
||||
content: "\2014 \0020";
|
||||
}
|
||||
}
|
||||
|
||||
q {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
q,
|
||||
.q {
|
||||
quotes: "“" "”" "‘" "’";
|
||||
|
||||
&:lang(fr) {
|
||||
quotes: "«\00a0" "\00a0»" "“" "”";
|
||||
}
|
||||
}
|
||||
59
sass/components/_radio.scss
Executable file
59
sass/components/_radio.scss
Executable file
|
|
@ -0,0 +1,59 @@
|
|||
/*
|
||||
* component radio
|
||||
*/
|
||||
/*
|
||||
* HTML template example:
|
||||
* <input type="radio" class="radio" name="radio" id="r1">
|
||||
* <label for="r1">Click here</label>
|
||||
*/
|
||||
|
||||
/*
|
||||
* radio variables (you can change them)
|
||||
*/
|
||||
|
||||
$radio-color: $color-alpha;
|
||||
$radio-background: $white;
|
||||
$radio-size: 2rem;
|
||||
$radio-border-radius: 50%;
|
||||
|
||||
/*
|
||||
* radio styles
|
||||
*/
|
||||
|
||||
.radio {
|
||||
border-radius: $radio-border-radius;
|
||||
}
|
||||
|
||||
.radio {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: $radio-size;
|
||||
height: $radio-size;
|
||||
vertical-align: text-bottom;
|
||||
outline: 0;
|
||||
box-shadow: inset 0 0 0 1px $color-alpha;
|
||||
background-color: $radio-background;
|
||||
transition: background-size 0.15s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.radio + label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.radio:disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.radio:disabled + label {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.radio:checked {
|
||||
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%2240%22%20height%3D%2240%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%23ffffff%22/%3E%3C/svg%3E");
|
||||
background-size: 70% 70%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: $color-alpha;
|
||||
}
|
||||
19
sass/components/_select.scss
Executable file
19
sass/components/_select.scss
Executable file
|
|
@ -0,0 +1,19 @@
|
|||
/*
|
||||
* basic select component
|
||||
*/
|
||||
/*
|
||||
HTML template example:
|
||||
<select>
|
||||
<option value="salade">salade</option>
|
||||
<option value="tomate">tomate</option>
|
||||
<option value="oignons">oignons</option>
|
||||
</select>
|
||||
*/
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
|
||||
background-position: right 0.8rem center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.2rem;
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==skip links */
|
||||
/* ----------------------------- */
|
||||
/* see https://www.alsacreations.com/article/lire/572-Les-liens-d-evitement.html */
|
||||
|
||||
/* styling skip links */
|
||||
.skip-links {
|
||||
position: absolute;
|
||||
|
||||
& a {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
padding: 0.5em;
|
||||
background: black;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
|
||||
&:focus {
|
||||
position: static;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Tables */
|
||||
/* ----------------------------- */
|
||||
|
||||
table,
|
||||
.table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
vertical-align: top;
|
||||
margin-bottom: $spacer-medium;
|
||||
}
|
||||
|
||||
.table {
|
||||
display: table;
|
||||
border: 1px solid $table-border;
|
||||
background: $table-background;
|
||||
|
||||
&--zebra {
|
||||
& tbody tr:nth-child(odd) {
|
||||
background: $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
& caption {
|
||||
caption-side: bottom;
|
||||
padding: $spacer-small;
|
||||
color: $table-caption-color;
|
||||
font-style: italic;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
& td,
|
||||
& th {
|
||||
padding: 0.3rem 0.6rem;
|
||||
min-width: $spacer-medium;
|
||||
vertical-align: top;
|
||||
border: 1px $table-border dotted;
|
||||
text-align: left;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
& thead {
|
||||
color: $table-head-color;
|
||||
background: $table-head-background;
|
||||
}
|
||||
}
|
||||
|
||||
.table--auto {
|
||||
table-layout: auto;
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Tabs */
|
||||
/* ----------------------------- */
|
||||
/* see example on https://knacss.com/styleguide.html#tabs */
|
||||
/* NOTE : tabs need JavaScript to be activated */
|
||||
|
||||
.tabs-menu {
|
||||
border-bottom: 2px solid $tabs-border;
|
||||
|
||||
&-link {
|
||||
display: block;
|
||||
margin-bottom: -2px;
|
||||
padding: $spacer-tiny $spacer-medium-plus;
|
||||
border-bottom: 4px solid transparent;
|
||||
color: $tabs-color;
|
||||
background: $tabs-background;
|
||||
text-decoration: none;
|
||||
border-radius: $tabs-border-radius $tabs-border-radius 0 0;
|
||||
transition: .25s;
|
||||
transition-property: color, border, background-color;
|
||||
|
||||
&.is-active {
|
||||
border-bottom-color: $tabs-active-border;
|
||||
color: $tabs-active-color;
|
||||
background: $tabs-active-background;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-bottom-color: $tabs-active-border;
|
||||
color: $tabs-active-color;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
@media (min-width: $small) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-content-item {
|
||||
padding-top: $spacer-small;
|
||||
|
||||
&[aria-hidden="true"] {
|
||||
visibility: hidden;
|
||||
@extend .visually-hidden;
|
||||
}
|
||||
|
||||
&[aria-hidden="false"] {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Tags */
|
||||
/* ----------------------------- */
|
||||
/* use .tag-- classes for variants */
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 3px $spacer-tiny;
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
color: $color-base;
|
||||
border-radius: $border-radius;
|
||||
background-color: $color-muted;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.tag {
|
||||
@each $name, $background-color, $color, $border in $variants-list {
|
||||
&--#{$name} {
|
||||
@extend .tag;
|
||||
background-color: $background-color;
|
||||
color: $color;
|
||||
box-shadow: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// tag state variants
|
||||
.tag {
|
||||
&--small {
|
||||
font-size: $font-size-base - 0.4rem;
|
||||
}
|
||||
|
||||
&--big {
|
||||
font-size: $font-size-base + 0.4rem;
|
||||
}
|
||||
|
||||
&--block {
|
||||
width: 100% !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&--disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,65 +1,31 @@
|
|||
/*!
|
||||
* www.KNACSS.com v7.1.2 (january, 30 2019) @author: Alsacreations, Raphael Goetter
|
||||
* KNACSS Reborn: Just keep it simple!
|
||||
* @author: Alsacreations
|
||||
* v1.0.0 2020/11
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Table Of Content */
|
||||
/* ----------------------------- */
|
||||
// WARNING : Only Core and Utilities are imported by default. Just add other files if you need them.
|
||||
|
||||
/*
|
||||
1- Reboot (basic reset)
|
||||
2- Base :
|
||||
- Reset
|
||||
- Print
|
||||
- Layout (alignment, modules, positionning)
|
||||
- Utilities (width and spacers helpers)
|
||||
- Responsive helpers
|
||||
- WordPress reset (disabled by default)
|
||||
- Grillade (Grid System)
|
||||
3- Components :
|
||||
- Media object
|
||||
- Skip Links for accessibility
|
||||
- Tables
|
||||
- Forms
|
||||
- Buttons
|
||||
- Checkbox
|
||||
- Tabs
|
||||
- Tags
|
||||
- Badges
|
||||
- Alerts
|
||||
*/
|
||||
// CORE
|
||||
@import "abstracts/variables-sass";
|
||||
@import "abstracts/mixins-sass";
|
||||
|
||||
// WARNING : you should comment the following @import (variables)
|
||||
// and move variables file from KNACSS folder to your own project folder!
|
||||
@import "abstracts/variables";
|
||||
@import "base/reset-base";
|
||||
@import "base/reset-accessibility";
|
||||
@import "base/reset-forms";
|
||||
@import "base/reset-print";
|
||||
@import "base/layout";
|
||||
|
||||
@import "abstracts/mixins";
|
||||
// UTILITY CLASSES
|
||||
// @import "utils/utils-global";
|
||||
// @import "utils/utils-spacers";
|
||||
// @import "utils/grillade";
|
||||
|
||||
// Core Libraries
|
||||
@import "base/reset"; // basic styles
|
||||
@import "base/print"; // print quick reset
|
||||
@import "base/layout"; // alignment, modules, positionning
|
||||
|
||||
// New Grid System by default (Grid Layout).
|
||||
// If you prefer old "Flexbox" Grid System, replace file with "base/grillade-flex"
|
||||
// Note that none of these files are prefixed by an underscore, in order to compile them.
|
||||
@import "base/grillade-grid"; // grid system with Grid Layout
|
||||
|
||||
// Components
|
||||
@import "components/alerts"; // alerts styles
|
||||
@import "components/arrows"; // arrows styles
|
||||
@import "components/badges"; // badges styles
|
||||
@import "components/buttons"; // buttons styles
|
||||
@import "components/checkbox"; // checkbox, radio, switch styles
|
||||
@import "components/forms"; // forms consistency and styles
|
||||
@import "components/media"; // media object
|
||||
@import "components/skip-links"; // skip links
|
||||
@import "components/tables"; // data tables consistency
|
||||
@import "components/tabs"; // tabs styles
|
||||
@import "components/tags"; // tags styles
|
||||
|
||||
// Utilities
|
||||
@import "base/utilities"; // width and spacer helpers
|
||||
@import "base/responsive"; // Responsive Web Design helpers
|
||||
// @import "base/wordpress"; // WordPress reset and basic styles
|
||||
// COMPONENTS (add them only if you need)
|
||||
// @import "components/button";
|
||||
// @import "components/burger";
|
||||
// @import "components/checkbox";
|
||||
// @import "components/radio";
|
||||
// @import "components/select";
|
||||
// @import "components/quote";
|
||||
|
|
|
|||
65
sass/utils/_utils-global.scss
Normal file
65
sass/utils/_utils-global.scss
Normal 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
134
sass/utils/_utils-spacers.scss
Normal 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
152
sass/utils/grillade.scss
Normal 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};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in a new issue