architecture globale revisitée (_vendor, _config, _library, components)
This commit is contained in:
Raphael Goetter
parent
f5f95fe9ac
commit
0ebe24ed0f
18 changed files with 260 additions and 259 deletions
|
|
@ -1,28 +1,29 @@
|
|||
@charset "UTF-8";
|
||||
/*!
|
||||
* www.KNACSS.com v6.1.2 (21 juin 2017) @author: Alsacreations, Raphael Goetter
|
||||
* www.KNACSS.com v7.0.0 (31 juillet 2017) @author: Alsacreations, Raphael Goetter
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
/* ----------------------------- */
|
||||
/* ==Table Of Content */
|
||||
/* ----------------------------- */
|
||||
/* 1- Normalize (basic reset) */
|
||||
/* 2- Base (basic styles) */
|
||||
/* 3- Print (print quick reset) */
|
||||
/* 4- Stylings (minor stylings) */
|
||||
/* 5- Misc (skip links, hyphens) */
|
||||
/* 6- Tables (data tables consistency) */
|
||||
/* 7- Forms (forms consistency) */
|
||||
/* 8- Media object */
|
||||
/* 9- Autogrid object */
|
||||
/* 10- Global Layout (alignment, modules, positionning) */
|
||||
/* 11- Helpers (width and spacers helpers) */
|
||||
/* (12- WordPress reset (disabled by default)) */
|
||||
/* 13- Responsive (Responsive Web Design helpers) */
|
||||
/* 14- Grid Layout (grillade) */
|
||||
/* ---------------------------------- */
|
||||
/* ==Normalize (basic reset) */
|
||||
/* ---------------------------------- */
|
||||
/*
|
||||
1- Normalize (basic reset)
|
||||
2- Libraries :
|
||||
- Base (basic global styles)
|
||||
- Print (basic print styles)
|
||||
- Styling (minor stylings)
|
||||
- Misc (skip links, hyphens)
|
||||
- Layout (alignment, modules, positionning)
|
||||
- Utilities (width and spacers helpers)
|
||||
- Responsive (Responsive helpers)
|
||||
- WordPress reset (disabled by default)
|
||||
3- Components :
|
||||
- Media object
|
||||
- Autogrid object
|
||||
- Tables (data tables consistency)
|
||||
- Forms (forms consistency)
|
||||
- Grillade (Grid System in Flexbox)
|
||||
*/
|
||||
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
/**
|
||||
* 1. Change the default font family in all browsers (opinionated).
|
||||
|
|
@ -970,208 +971,6 @@ th {
|
|||
}
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Tables */
|
||||
/* ----------------------------- */
|
||||
table,
|
||||
.table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
vertical-align: top;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.table {
|
||||
display: table;
|
||||
}
|
||||
|
||||
#recaptcha_table,
|
||||
.table-auto {
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
vertical-align: top;
|
||||
min-width: 2rem;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Forms */
|
||||
/* ----------------------------- */
|
||||
/* thanks to HTML5boilerplate,
|
||||
* github.com/nathansmith/formalize and www.sitepen.com
|
||||
*/
|
||||
/* buttons */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* forms items */
|
||||
form,
|
||||
fieldset {
|
||||
border: none;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
label,
|
||||
.btn {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
label {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
legend {
|
||||
border: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 5em;
|
||||
vertical-align: top;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
select {
|
||||
-webkit-appearance: menulist-button;
|
||||
}
|
||||
|
||||
/* if select styling bugs on WebKit */
|
||||
/* select { -webkit-appearance: none; } */
|
||||
/* 'x' appears on right of search input when text is entered. This removes it */
|
||||
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
input:-moz-placeholder,
|
||||
textarea:-moz-placeholder {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.btn:focus,
|
||||
input[type="button"]:focus,
|
||||
button:focus {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* unstyled forms */
|
||||
button.unstyled,
|
||||
input[type="button"].unstyled,
|
||||
input[type="submit"].unstyled,
|
||||
input[type="reset"].unstyled {
|
||||
padding: 0;
|
||||
border: none;
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
button.unstyled:focus,
|
||||
input[type="button"].unstyled:focus,
|
||||
input[type="submit"].unstyled:focus,
|
||||
input[type="reset"].unstyled:focus {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Media object */
|
||||
/* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
|
||||
@media (min-width: 576px) {
|
||||
.o-media {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.o-media-content {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
/* avoid min-width:auto */
|
||||
}
|
||||
}
|
||||
|
||||
/* Media variants */
|
||||
@media (min-width: 576px) {
|
||||
.o-media--reverse {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: reverse;
|
||||
-ms-flex-direction: row-reverse;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.o-media-figure--center {
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Autogrid object */
|
||||
/* see http://codepen.io/raphaelgoetter/pen/KMgBJd */
|
||||
@media (min-width: 576px) {
|
||||
[class^="autogrid"],
|
||||
[class*=" autogrid"] {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
[class^="autogrid"] > *,
|
||||
[class*=" autogrid"] > * {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
/* avoid min-width:auto */
|
||||
}
|
||||
}
|
||||
|
||||
/* Autogrid variants */
|
||||
@media (min-width: 576px) {
|
||||
.has-gutter > *:not(:first-child) {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
[class*="--reverse"] {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: reverse;
|
||||
-ms-flex-direction: row-reverse;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Global Layout */
|
||||
/* ----------------------------- */
|
||||
|
|
@ -1892,6 +1691,208 @@ ul.is-unstyled, ul.unstyled {
|
|||
}
|
||||
}
|
||||
|
||||
/* Media object */
|
||||
/* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
|
||||
@media (min-width: 576px) {
|
||||
.o-media {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.o-media-content {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
/* avoid min-width:auto */
|
||||
}
|
||||
}
|
||||
|
||||
/* Media variants */
|
||||
@media (min-width: 576px) {
|
||||
.o-media--reverse {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: reverse;
|
||||
-ms-flex-direction: row-reverse;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.o-media-figure--center {
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Autogrid object */
|
||||
/* see http://codepen.io/raphaelgoetter/pen/KMgBJd */
|
||||
@media (min-width: 576px) {
|
||||
[class^="autogrid"],
|
||||
[class*=" autogrid"] {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
[class^="autogrid"] > *,
|
||||
[class*=" autogrid"] > * {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
/* avoid min-width:auto */
|
||||
}
|
||||
}
|
||||
|
||||
/* Autogrid variants */
|
||||
@media (min-width: 576px) {
|
||||
.has-gutter > *:not(:first-child) {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
[class*="--reverse"] {
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: reverse;
|
||||
-ms-flex-direction: row-reverse;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Tables */
|
||||
/* ----------------------------- */
|
||||
table,
|
||||
.table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
vertical-align: top;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.table {
|
||||
display: table;
|
||||
}
|
||||
|
||||
#recaptcha_table,
|
||||
.table-auto {
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
vertical-align: top;
|
||||
min-width: 2rem;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Forms */
|
||||
/* ----------------------------- */
|
||||
/* thanks to HTML5boilerplate,
|
||||
* github.com/nathansmith/formalize and www.sitepen.com
|
||||
*/
|
||||
/* buttons */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* forms items */
|
||||
form,
|
||||
fieldset {
|
||||
border: none;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
label,
|
||||
.btn {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
label {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
legend {
|
||||
border: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 5em;
|
||||
vertical-align: top;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
select {
|
||||
-webkit-appearance: menulist-button;
|
||||
}
|
||||
|
||||
/* if select styling bugs on WebKit */
|
||||
/* select { -webkit-appearance: none; } */
|
||||
/* 'x' appears on right of search input when text is entered. This removes it */
|
||||
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
input:-moz-placeholder,
|
||||
textarea:-moz-placeholder {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.btn:focus,
|
||||
input[type="button"]:focus,
|
||||
button:focus {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* unstyled forms */
|
||||
button.unstyled,
|
||||
input[type="button"].unstyled,
|
||||
input[type="submit"].unstyled,
|
||||
input[type="reset"].unstyled {
|
||||
padding: 0;
|
||||
border: none;
|
||||
line-height: 1;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
button.unstyled:focus,
|
||||
input[type="button"].unstyled:focus,
|
||||
input[type="submit"].unstyled:focus,
|
||||
input[type="reset"].unstyled:focus {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* ==Grillade : Simple Grid System */
|
||||
/* ---------------------------------- */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue