suppression du positionnement tabulaire
This commit is contained in:
Raphael Goetter
parent
a1773bbae9
commit
1f45d141be
|
|
@ -3,6 +3,7 @@
|
|||
- refonte des valeurs des Breakpoints et des classes responsive.
|
||||
- modularisation des fichiers et dossiers, classés par fonctions (config, vendor, library, objects, utility)
|
||||
- ajout des objects courants : media et autogrid
|
||||
- suppression des positionnements tabulaires. `.row`, `.col` et `.line` n'ont plus lieu d'être depuis Flexbox, peuvent entrer en conflit avec d'autres frameworks et ne font que parasiter KNACSS
|
||||
|
||||
# changelog v5.0.1 (24 mai 2016)
|
||||
- les helpers de largeurs deviennent mobile-first et ne s'activent que sur écran d'une certaine taille. Ex. `.w700p {width: 700px;}` devient `@include media('>640px') {.w700p {width: 700px;}}`. Ainsi il n'est plus nécessaire de les écraser dans la feuille de style responsive.
|
||||
|
|
|
|||
|
|
@ -9,15 +9,12 @@
|
|||
}
|
||||
|
||||
/* blocks that needs to be placed under floats */
|
||||
.clear,
|
||||
.#{$kna-namespace}line,
|
||||
.#{$kna-namespace}row {
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* blocks that must contain floats */
|
||||
.clearfix,
|
||||
.#{$kna-namespace}line {
|
||||
.clearfix {
|
||||
&::after {
|
||||
content: "";
|
||||
display: table;
|
||||
|
|
@ -75,24 +72,6 @@ img.#{$kna-namespace}fr {
|
|||
margin-bottom: $tiny-value;
|
||||
}
|
||||
|
||||
/* table layout */
|
||||
.#{$kna-namespace}row {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}row > *,
|
||||
.#{$kna-namespace}col {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* no table-cell for script tag when body is a .row */
|
||||
body > script {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* inline-block */
|
||||
.#{$kna-namespace}inbl {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -25,15 +25,6 @@
|
|||
float: none;
|
||||
vertical-align: top;
|
||||
}
|
||||
.#{$kna-namespace}large-row {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100% !important;
|
||||
}
|
||||
.#{$kna-namespace}large-col {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* widths for large screens */
|
||||
.#{$kna-namespace}large-w25 {
|
||||
|
|
@ -41,7 +32,7 @@
|
|||
}
|
||||
|
||||
.#{$kna-namespace}large-w33 {
|
||||
width: 33.3333% !important;
|
||||
width: 33.333333% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}large-w50 {
|
||||
|
|
@ -49,7 +40,7 @@
|
|||
}
|
||||
|
||||
.#{$kna-namespace}large-w66 {
|
||||
width: 66.6666% !important;
|
||||
width: 66.666666% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}large-w75 {
|
||||
|
|
@ -98,24 +89,13 @@
|
|||
vertical-align: top;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}medium-row {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}medium-col {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* widths for medium screens */
|
||||
.#{$kna-namespace}medium-w25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}medium-w33 {
|
||||
width: 33.3333% !important;
|
||||
width: 33.333333% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}medium-w50 {
|
||||
|
|
@ -123,7 +103,7 @@
|
|||
}
|
||||
|
||||
.#{$kna-namespace}medium-w66 {
|
||||
width: 66.6666% !important;
|
||||
width: 66.666666% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}medium-w75 {
|
||||
|
|
@ -172,24 +152,13 @@
|
|||
vertical-align: top;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}small-row {
|
||||
display: table !important;
|
||||
table-layout: fixed !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}small-col {
|
||||
display: table-cell !important;
|
||||
vertical-align: top !important;
|
||||
}
|
||||
|
||||
/* widths for small screens */
|
||||
.#{$kna-namespace}small-w25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}small-w33 {
|
||||
width: 33.3333% !important;
|
||||
width: 33.333333% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}small-w50 {
|
||||
|
|
@ -197,7 +166,7 @@
|
|||
}
|
||||
|
||||
.#{$kna-namespace}small-w66 {
|
||||
width: 66.6666% !important;
|
||||
width: 66.666666% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}small-w75 {
|
||||
|
|
@ -250,11 +219,6 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}row {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* layouts for tiny screens */
|
||||
.#{$kna-namespace}tiny-hidden {
|
||||
display: none !important;
|
||||
|
|
@ -274,35 +238,13 @@
|
|||
vertical-align: top;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}tiny-row {
|
||||
display: table !important;
|
||||
table-layout: fixed !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}tiny-col {
|
||||
display: table-cell !important;
|
||||
vertical-align: top !important;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
display: block;
|
||||
width: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* widths for tiny screens */
|
||||
.#{$kna-namespace}tiny-w25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}tiny-w33 {
|
||||
width: 33.3333% !important;
|
||||
width: 33.333333% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}tiny-w50 {
|
||||
|
|
@ -310,7 +252,7 @@
|
|||
}
|
||||
|
||||
.#{$kna-namespace}tiny-w66 {
|
||||
width: 66.6666% !important;
|
||||
width: 66.666666% !important;
|
||||
}
|
||||
|
||||
.#{$kna-namespace}tiny-w75 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user