Ajout de classes helpers
// spacings (choose unit you prefer) @tiny-value : .5rem; // tiny value for margins / paddings @tiny-plus-value : .7rem; // tiny+ value for margins / paddings @small-value : 1rem; // small value for margins / paddings @small-plus-value : 1.5rem; // small+ value for margins / paddings @medium-value : 2rem; // medium value for margins / paddings @medium-plus-value : 3rem; // medium+ value for margins / paddings @large-value : 4rem; // large value for margins / paddings @large-plus-value : 6rem; // large value for margins / paddings @extra-large-value : 8rem; // extra large value for margins / paddings @extra-large-plus-value : 12rem; // extra large value for margins / paddings @ultra-large-value : 16rem; // ultra large value for margins / paddings @ultra-large-plus-value : 20rem; // ultra large value for margins / paddings // breakpoints (choose unit you prefer) @tiny-screen : 320px; // tiny screens media query (less-equal than 320px) @tiny-plus-screen : 480px; // screens between 321px and 480px @small-screen : 640px; // screens between 481px and 640px @small-plus-screen : 768px; // screens between 641px and 768px @medium-screen : 960px; // screens between 769px and 960px @medium-plus-screen : 1024px; // screens between 961px and 1024px @large-screen : 1280px; // screens between 1025px and 1280px @large-plus-screen : 1440px; // screens between 1281px and 1440px @extra-large-screen : 1600px; // screens between 1441px and 1600px @ultra-large-screen : 1920px; // ultra large screens
This commit is contained in:
raphaelgoettter
parent
9e40fd8749
commit
4b0153af47
5 changed files with 108 additions and 80 deletions
|
|
@ -507,7 +507,7 @@ var {
|
|||
overflow: hidden !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 640px) {
|
||||
.no-small-screen {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -565,7 +565,7 @@ svg {
|
|||
}
|
||||
/* margin-bottom on tables */
|
||||
table {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
/* ----------------------------- */
|
||||
/* ==layout and modules */
|
||||
|
|
@ -615,17 +615,17 @@ table {
|
|||
float: left;
|
||||
}
|
||||
img.fl {
|
||||
margin-right: 10px;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
img.fr {
|
||||
margin-left: 10px;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
img.fl,
|
||||
img.fr {
|
||||
margin-bottom: 5px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
/* table layout */
|
||||
.row {
|
||||
|
|
@ -792,7 +792,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
width: calc(100% * 2 / 12 - 1em - .01px);
|
||||
}
|
||||
/* Responsive grid */
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 640px) {
|
||||
[class*="-small-4"] > * {
|
||||
width: calc(100% * 1 / 4 - 1em - .01px);
|
||||
}
|
||||
|
|
@ -818,7 +818,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: 320px) {
|
||||
[class*="-tiny-2"] > * {
|
||||
width: calc(100% * 1 / 2 - 1em - .01px);
|
||||
}
|
||||
|
|
@ -838,7 +838,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
.grid-2-1 > *:nth-child(even) {
|
||||
width: calc(33.33333333333333% - 1em - .01px);
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: 320px) {
|
||||
.grid-2-1 > *:nth-child(n) {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
|
|
@ -849,7 +849,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
.grid-1-2 > *:nth-child(even) {
|
||||
width: calc(66.66666666666666% - 1em - .01px);
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: 320px) {
|
||||
.grid-1-2 > *:nth-child(n) {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
|
|
@ -860,7 +860,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
.grid-3-1 > *:nth-child(even) {
|
||||
width: calc(25% - 1em - .01px);
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: 320px) {
|
||||
.grid-3-1 > *:nth-child(n) {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
|
|
@ -871,7 +871,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
.grid-1-3 > *:nth-child(even) {
|
||||
width: calc(75% - 1em - .01px);
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: 320px) {
|
||||
.grid-1-3 > *:nth-child(n) {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
|
|
@ -882,7 +882,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
.grid-3-2 > *:nth-child(even) {
|
||||
width: calc(40% - 1em - .01px);
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: 320px) {
|
||||
.grid-3-2 > *:nth-child(n) {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
|
|
@ -893,7 +893,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
.grid-2-3 > *:nth-child(even) {
|
||||
width: calc(60% - 1em - .01px);
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: 320px) {
|
||||
.grid-2-3 > *:nth-child(n) {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
|
|
@ -904,7 +904,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
.grid-4-1 > *:nth-child(even) {
|
||||
width: calc(20% - 1em - .01px);
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: 320px) {
|
||||
.grid-4-1 > *:nth-child(n) {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
|
|
@ -915,7 +915,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
.grid-1-4 > *:nth-child(even) {
|
||||
width: calc(80% - 1em - .01px);
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: 320px) {
|
||||
.grid-1-4 > *:nth-child(n) {
|
||||
width: calc(100% - 1em - .01px);
|
||||
}
|
||||
|
|
@ -941,7 +941,7 @@ table.table-auto {
|
|||
td,
|
||||
th {
|
||||
vertical-align: top;
|
||||
min-width: 20px;
|
||||
min-width: 2rem;
|
||||
cursor: default;
|
||||
}
|
||||
/* ----------------------------- */
|
||||
|
|
@ -1149,131 +1149,131 @@ s,m,l,n = small, medium, large, none
|
|||
padding: 0;
|
||||
}
|
||||
.mas {
|
||||
margin: 10px;
|
||||
margin: 1rem;
|
||||
}
|
||||
.mam {
|
||||
margin: 20px;
|
||||
margin: 2rem;
|
||||
}
|
||||
.mal {
|
||||
margin: 40px;
|
||||
margin: 4rem;
|
||||
}
|
||||
.pas {
|
||||
padding: 10px;
|
||||
padding: 1rem;
|
||||
}
|
||||
.pam {
|
||||
padding: 20px;
|
||||
padding: 2rem;
|
||||
}
|
||||
.pal {
|
||||
padding: 40px;
|
||||
padding: 4rem;
|
||||
}
|
||||
.mtn,
|
||||
.mt0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.mts {
|
||||
margin-top: 10px;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.mtm {
|
||||
margin-top: 20px;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.mtl {
|
||||
margin-top: 40px;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
.mrn,
|
||||
.mr0 {
|
||||
margin-right: 0;
|
||||
}
|
||||
.mrs {
|
||||
margin-right: 10px;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.mrm {
|
||||
margin-right: 20px;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
.mrl {
|
||||
margin-right: 40px;
|
||||
margin-right: 4rem;
|
||||
}
|
||||
.mbn,
|
||||
.mb0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.mbs {
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.mbm {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.mbl {
|
||||
margin-bottom: 40px;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
.mln,
|
||||
.ml0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
.mls {
|
||||
margin-left: 10px;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.mlm {
|
||||
margin-left: 20px;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
.mll {
|
||||
margin-left: 40px;
|
||||
margin-left: 4rem;
|
||||
}
|
||||
.ptn,
|
||||
.pt0 {
|
||||
padding-top: 0;
|
||||
}
|
||||
.pts {
|
||||
padding-top: 10px;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
.ptm {
|
||||
padding-top: 20px;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
.ptl {
|
||||
padding-top: 40px;
|
||||
padding-top: 4rem;
|
||||
}
|
||||
.prn,
|
||||
.pr0 {
|
||||
padding-right: 0;
|
||||
}
|
||||
.prs {
|
||||
padding-right: 10px;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.prm {
|
||||
padding-right: 20px;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
.prl {
|
||||
padding-right: 40px;
|
||||
padding-right: 4rem;
|
||||
}
|
||||
.pbn,
|
||||
.pb0 {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.pbs {
|
||||
padding-bottom: 10px;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
.pbm {
|
||||
padding-bottom: 20px;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
.pbl {
|
||||
padding-bottom: 40px;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
.pln,
|
||||
.pl0 {
|
||||
padding-left: 0;
|
||||
}
|
||||
.pls {
|
||||
padding-left: 10px;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.plm {
|
||||
padding-left: 20px;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
.pll {
|
||||
padding-left: 40px;
|
||||
padding-left: 4rem;
|
||||
}
|
||||
/* ----------------------------- */
|
||||
/* ==desktop and HD devices */
|
||||
/* ----------------------------- */
|
||||
@media (min-width: 1025px) {
|
||||
@media (min-width: 961px) {
|
||||
/* rules for big resources and big screens like: background-images, font-faces, etc. */
|
||||
}
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
|
||||
|
|
@ -1282,7 +1282,7 @@ s,m,l,n = small, medium, large, none
|
|||
/* ---------------------------------- */
|
||||
/* ==Responsive large */
|
||||
/* ---------------------------------- */
|
||||
@media (min-width: 1025px) {
|
||||
@media (min-width: 961px) {
|
||||
/* layouts for large screens */
|
||||
.large-hidden {
|
||||
display: none !important;
|
||||
|
|
@ -1341,7 +1341,7 @@ s,m,l,n = small, medium, large, none
|
|||
/* ---------------------------------- */
|
||||
/* ==Responsive medium */
|
||||
/* ---------------------------------- */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
@media (min-width: 641px) and (max-width: 960px) {
|
||||
/* layouts for medium screens */
|
||||
.medium-hidden {
|
||||
display: none !important;
|
||||
|
|
@ -1401,7 +1401,7 @@ s,m,l,n = small, medium, large, none
|
|||
/* ---------------------------------- */
|
||||
/* ==Responsive small */
|
||||
/* ---------------------------------- */
|
||||
@media (min-width: 481px) and (max-width: 768px) {
|
||||
@media (min-width: 321px) and (max-width: 640px) {
|
||||
/* quick reset in small resolution and less */
|
||||
.w600p,
|
||||
.w700p,
|
||||
|
|
@ -1474,7 +1474,7 @@ s,m,l,n = small, medium, large, none
|
|||
/* ---------------------------------- */
|
||||
/* ==Responsive tiny */
|
||||
/* ---------------------------------- */
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: 320px) {
|
||||
/* quick tiny resolution reset */
|
||||
.mod,
|
||||
.col,
|
||||
|
|
@ -1677,7 +1677,7 @@ s,m,l,n = small, medium, large, none
|
|||
overflow: visible;
|
||||
clip: auto;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 640px) {
|
||||
/* you shall not pass */
|
||||
div,
|
||||
textarea,
|
||||
|
|
@ -1792,7 +1792,7 @@ table,
|
|||
border: 1px solid #ccc;
|
||||
}
|
||||
caption {
|
||||
padding: 10px;
|
||||
padding: 1rem;
|
||||
color: #555;
|
||||
font-style: italic;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,12 +4,20 @@
|
|||
|
||||
Par défaut, KNACSS tient compte des valeurs de points de rupture suivants :
|
||||
|
||||
- "tiny" : correspond à une fenêtre de 480px ou moins
|
||||
- "small" : correspond à une fenêtre entre 481px et 768px inclus
|
||||
- "medium"correspond à une fenêtre entre 769px et 1024px inclus
|
||||
- "large"correspond à une fenêtre entre 1025px et 1280px inclus
|
||||
- "extra-large"correspond à une fenêtre entre 1281px et 1600px inclus
|
||||
- "ultra-large"correspond à une fenêtre à partir de 1601px
|
||||
```
|
||||
// breakpoints (choose unit you prefer)
|
||||
@tiny-screen : 320px; // tiny screens media query (less-equal than 320px)
|
||||
@tiny-plus-screen : 480px; // screens between 321px and 480px
|
||||
@small-screen : 640px; // screens between 481px and 640px
|
||||
@small-plus-screen : 768px; // screens between 641px and 768px
|
||||
@medium-screen : 960px; // screens between 769px and 960px
|
||||
@medium-plus-screen : 1024px; // screens between 961px and 1024px
|
||||
@large-screen : 1280px; // screens between 1025px and 1280px
|
||||
@large-plus-screen : 1440px; // screens between 1281px and 1440px
|
||||
@extra-large-screen : 1600px; // screens between 1441px and 1600px
|
||||
@ultra-large-screen : 1920px; // ultra large screens
|
||||
```
|
||||
|
||||
|
||||
_Les valeurs des points de rupture peuvent être modifiées au sein du fichier de configuration LESS / Sass._
|
||||
|
||||
|
|
|
|||
|
|
@ -35,19 +35,29 @@
|
|||
@secondary-background : #fff; // secondary elements background color
|
||||
|
||||
// spacings (choose unit you prefer)
|
||||
@tiny-value : 5px; // tiny value for margins / paddings
|
||||
@small-value : 10px; // small value for margins / paddings
|
||||
@medium-value : 20px; // medium value for margins / paddings
|
||||
@large-value : 40px; // large value for margins / paddings
|
||||
@extra-large-value : 80px; // extra large value for margins / paddings
|
||||
@ultra-large-value : 160px; // ultra large value for margins / paddings
|
||||
@tiny-value : .5rem; // tiny value for margins / paddings
|
||||
@tiny-plus-value : .7rem; // tiny+ value for margins / paddings
|
||||
@small-value : 1rem; // small value for margins / paddings
|
||||
@small-plus-value : 1.5rem; // small+ value for margins / paddings
|
||||
@medium-value : 2rem; // medium value for margins / paddings
|
||||
@medium-plus-value : 3rem; // medium+ value for margins / paddings
|
||||
@large-value : 4rem; // large value for margins / paddings
|
||||
@large-plus-value : 6rem; // large value for margins / paddings
|
||||
@extra-large-value : 8rem; // extra large value for margins / paddings
|
||||
@extra-large-plus-value : 12rem; // extra large value for margins / paddings
|
||||
@ultra-large-value : 16rem; // ultra large value for margins / paddings
|
||||
@ultra-large-plus-value : 20rem; // ultra large value for margins / paddings
|
||||
|
||||
// breakpoints (choose unit you prefer)
|
||||
@tiny-screen : 480px; // tiny screens media query (less than 480px)
|
||||
@small-screen : 768px; // screens between 481px and 768px
|
||||
@medium-screen : 1024px; // screens between 769px and 1024px
|
||||
@tiny-screen : 320px; // tiny screens media query (less-equal than 320px)
|
||||
@tiny-plus-screen : 480px; // screens between 321px and 480px
|
||||
@small-screen : 640px; // screens between 481px and 640px
|
||||
@small-plus-screen : 768px; // screens between 641px and 768px
|
||||
@medium-screen : 960px; // screens between 769px and 960px
|
||||
@medium-plus-screen : 1024px; // screens between 961px and 1024px
|
||||
@large-screen : 1280px; // screens between 1025px and 1280px
|
||||
@extra-large-screen : 1600px; // screens between 1281px and 1600px
|
||||
@large-plus-screen : 1440px; // screens between 1281px and 1440px
|
||||
@extra-large-screen : 1600px; // screens between 1441px and 1600px
|
||||
@ultra-large-screen : 1920px; // ultra large screens
|
||||
|
||||
// grids variables (choose unit you prefer)
|
||||
|
|
|
|||
|
|
@ -35,19 +35,29 @@ $primary-background : #fff !default; // primary elements background color
|
|||
$secondary-background : #fff !default; // secondary elements background color
|
||||
|
||||
// spacings (choose unit you prefer)
|
||||
$tiny-value : 5px !default; // tiny value for margins / paddings
|
||||
$small-value : 10px !default; // small value for margins / paddings
|
||||
$medium-value : 20px !default; // medium value for margins / paddings
|
||||
$large-value : 40px !default; // large value for margins / paddings
|
||||
$extra-large-value : 80px !default; // extra large value for margins / paddings
|
||||
$ultra-large-value : 160px !default; // ultra large value for margins / paddings
|
||||
$tiny-value : .5rem !default; // tiny value for margins / paddings
|
||||
$tiny-plus-value : .7rem !default; // tiny+ value for margins / paddings
|
||||
$small-value : 1rem !default; // small value for margins / paddings
|
||||
$small-plus-value : 1.5rem !default; // small+ value for margins / paddings
|
||||
$medium-value : 2rem !default; // medium value for margins / paddings
|
||||
$medium-plus-value : 3rem !default; // medium+ value for margins / paddings
|
||||
$large-value : 4rem !default; // large value for margins / paddings
|
||||
$large-plus-value : 6rem !default; // large value for margins / paddings
|
||||
$extra-large-value : 8rem !default; // extra large value for margins / paddings
|
||||
$extra-large-plus-value : 12rem !default; // extra large value for margins / paddings
|
||||
$ultra-large-value : 16rem !default; // ultra large value for margins / paddings
|
||||
$ultra-large-plus-value : 20rem !default; // ultra large value for margins / paddings
|
||||
|
||||
// breakpoints (choose unit you prefer)
|
||||
$tiny-screen : 480px !default; // tiny screens media query (less than 480px)
|
||||
$small-screen : 768px !default; // screens between 481px and 768px
|
||||
$medium-screen : 1024px !default; // screens between 769px and 1024px
|
||||
$tiny-screen : 320px !default; // tiny screens media query (less-equal than 320px)
|
||||
$tiny-plus-screen : 480px !default; // screens between 321px and 480px
|
||||
$small-screen : 640px !default; // screens between 481px and 640px
|
||||
$small-plus-screen : 768px !default; // screens between 641px and 768px
|
||||
$medium-screen : 960px !default; // screens between 769px and 960px
|
||||
$medium-plus-screen : 1024px !default; // screens between 961px and 1024px
|
||||
$large-screen : 1280px !default; // screens between 1025px and 1280px
|
||||
$extra-large-screen : 1600px !default; // screens between 1281px and 1600px
|
||||
$large-plus-screen : 1440px !default; // screens between 1281px and 1440px
|
||||
$extra-large-screen : 1600px !default; // screens between 1441px and 1600px
|
||||
$ultra-large-screen : 1920px !default; // ultra large screens
|
||||
|
||||
// grids variables (choose unit you prefer)
|
||||
|
|
|
|||
Loading…
Reference in a new issue