dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

suppression du namespace "kna-"

Browse source
This commit is contained in:
Raphael Goetter 2017-07-31 11:45:22 +02:00
parent 5d48351ef0
commit 6e3d128d8e
10 changed files with 214 additions and 213 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
changelog.md
View file

@ -3,6 +3,7 @@
- normalize.css v7.0.0 - normalize.css v7.0.0
- autogrid object en Grid Layout - autogrid object en Grid Layout
- regroupement des styles des tableaux - regroupement des styles des tableaux
- suppression du namespace "kna-", ne devrait pas être problématique dès lors que Grillade sera devenu inutile dans KNACSS
# changelog v6.1.2 (21 juin 2017) # changelog v6.1.2 (21 juin 2017)
- alignement des helpers flexbox sur ceux de Bootstrap (`.d-flex`, `.flex-row`, `.flex-column`, `.mr-auto`) - alignement des helpers flexbox sur ceux de Bootstrap (`.d-flex`, `.flex-row`, `.flex-column`, `.mr-auto`)

42
sass/_library/_base.scss
View file

@ -69,7 +69,7 @@ figure {
/* font-sizing for content */ /* font-sizing for content */
p, p,
.#{$kna-namespace}p-like, .p-like,
ul, ul,
ol, ol,
dl, dl,
@ -87,7 +87,7 @@ figure {
line-height: $line-height; line-height: $line-height;
} }
h1, .#{$kna-namespace}h1-like { h1, .h1-like {
font-size: $h1-size; font-size: $h1-size;
@if variable_exists(h1-size-l) and $h1-size-l != $h1-size { @if variable_exists(h1-size-l) and $h1-size-l != $h1-size {
@include respond-to("tiny-up") { @include respond-to("tiny-up") {
@ -99,7 +99,7 @@ h1, .#{$kna-namespace}h1-like {
} }
} }
h2, .#{$kna-namespace}h2-like { h2, .h2-like {
font-size: $h2-size; font-size: $h2-size;
@if variable_exists(h2-size-l) and $h2-size-l != $h2-size { @if variable_exists(h2-size-l) and $h2-size-l != $h2-size {
@include respond-to("tiny-up") { @include respond-to("tiny-up") {
@ -111,7 +111,7 @@ h2, .#{$kna-namespace}h2-like {
} }
} }
h3, .#{$kna-namespace}h3-like { h3, .h3-like {
font-size: $h3-size; font-size: $h3-size;
@if variable_exists(h3-size-l) and $h3-size-l != $h3-size { @if variable_exists(h3-size-l) and $h3-size-l != $h3-size {
@include respond-to("tiny-up") { @include respond-to("tiny-up") {
@ -120,7 +120,7 @@ h3, .#{$kna-namespace}h3-like {
} }
} }
h4, .#{$kna-namespace}h4-like { h4, .h4-like {
font-size: $h4-size; font-size: $h4-size;
@if variable_exists(h4-size-l) and $h4-size-l != $h4-size { @if variable_exists(h4-size-l) and $h4-size-l != $h4-size {
@include respond-to("tiny-up") { @include respond-to("tiny-up") {
@ -129,7 +129,7 @@ h4, .#{$kna-namespace}h4-like {
} }
} }
h5, .#{$kna-namespace}h5-like { h5, .h5-like {
font-size: $h5-size; font-size: $h5-size;
@if variable_exists(h5-size-l) and $h5-size-l != $h5-size { @if variable_exists(h5-size-l) and $h5-size-l != $h5-size {
@include respond-to("tiny-up") { @include respond-to("tiny-up") {
@ -138,7 +138,7 @@ h5, .#{$kna-namespace}h5-like {
} }
} }
h6, .#{$kna-namespace}h6-like { h6, .h6-like {
font-size: $h6-size; font-size: $h6-size;
@if variable_exists(h6-size-l) and $h6-size-l != $h6-size { @if variable_exists(h6-size-l) and $h6-size-l != $h6-size {
@include respond-to("tiny-up") { @include respond-to("tiny-up") {
@ -148,23 +148,23 @@ h6, .#{$kna-namespace}h6-like {
} }
/* alternate font-sizing */ /* alternate font-sizing */
.#{$kna-namespace}smaller { .smaller {
font-size: 0.6em; font-size: 0.6em;
} }
.#{$kna-namespace}small { .small {
font-size: 0.8em; font-size: 0.8em;
} }
.#{$kna-namespace}big { .big {
font-size: 1.2em; font-size: 1.2em;
} }
.#{$kna-namespace}bigger { .bigger {
font-size: 1.5em; font-size: 1.5em;
} }
.#{$kna-namespace}biggest { .biggest {
font-size: 2em; font-size: 2em;
} }
@ -180,7 +180,7 @@ kbd {
} }
em, em,
.#{$kna-namespace}italic, .italic,
address, address,
cite, cite,
i, i,
@ -190,24 +190,24 @@ var {
/* avoid top margins on first content element */ /* avoid top margins on first content element */
p, p,
.#{$kna-namespace}p-like, .p-like,
ul, ul,
ol, ol,
dl, dl,
blockquote, blockquote,
pre, pre,
h1, h1,
.#{$kna-namespace}h1-like, .h1-like,
h2, h2,
.#{$kna-namespace}h2-like, .h2-like,
h3, h3,
.#{$kna-namespace}h3-like, .h3-like,
h4, h4,
.#{$kna-namespace}h4-like, .h4-like,
h5, h5,
.#{$kna-namespace}h5-like, .h5-like,
h6, h6,
.#{$kna-namespace}h6-like { .h6-like {
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
} }
@ -215,7 +215,7 @@ h6,
/* avoid margins on nested elements */ /* avoid margins on nested elements */
li p, li p,
li .#{$kna-namespace}p-like, li .p-like,
li ul, li ul,
li ol { li ol {
margin-top: 0; margin-top: 0;

52
sass/_library/_layout.scss
View file

@ -24,56 +24,56 @@
} }
/* simple blocks alignment */ /* simple blocks alignment */
.#{$kna-namespace}left { .left {
margin-right: auto; margin-right: auto;
} }
.#{$kna-namespace}right { .right {
margin-left: auto; margin-left: auto;
} }
.#{$kna-namespace}center { .center {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
/* text and contents alignment */ /* text and contents alignment */
.#{$kna-namespace}txtleft { .txtleft {
text-align: left; text-align: left;
} }
.#{$kna-namespace}txtright { .txtright {
text-align: right; text-align: right;
} }
.#{$kna-namespace}txtcenter { .txtcenter {
text-align: center; text-align: center;
} }
/* floating elements */ /* floating elements */
.#{$kna-namespace}fl { .fl {
float: left; float: left;
} }
img.#{$kna-namespace}fl { img.fl {
margin-right: $small-value; margin-right: $small-value;
} }
.#{$kna-namespace}fr { .fr {
float: right; float: right;
} }
img.#{$kna-namespace}fr { img.fr {
margin-left: $small-value; margin-left: $small-value;
} }
img.#{$kna-namespace}fl, img.fl,
img.#{$kna-namespace}fr { img.fr {
margin-bottom: $tiny-value; margin-bottom: $tiny-value;
} }
/* inline-block */ /* inline-block */
.#{$kna-namespace}inbl { .inbl {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
@ -82,45 +82,45 @@ img.#{$kna-namespace}fr {
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
*/ */
[class*="#{$kna-namespace}flex-container"], [class*="flex-container"],
.#{$kna-namespace}flex-container, .flex-container,
.d-flex { .d-flex {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
.#{$kna-namespace}flex-container-h, .flex-container-h,
.flex-row { .flex-row {
flex-direction: row; flex-direction: row;
} }
.#{$kna-namespace}flex-container-v, .flex-container-v,
.flex-column { .flex-column {
flex-direction: column; flex-direction: column;
} }
.#{$kna-namespace}flex-item-fluid { .flex-item-fluid {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
} }
.#{$kna-namespace}flex-item-first, .flex-item-first,
.#{$kna-namespace}item-first { .item-first {
order: -1; order: -1;
} }
.#{$kna-namespace}flex-item-medium, .flex-item-medium,
.#{$kna-namespace}item-medium { .item-medium {
order: 0; order: 0;
} }
.#{$kna-namespace}flex-item-last, .flex-item-last,
.#{$kna-namespace}item-last { .item-last {
order: 1; order: 1;
} }
.#{$kna-namespace}flex-item-center, .flex-item-center,
.#{$kna-namespace}item-center, .item-center,
.mr-auto { .mr-auto {
margin: auto; margin: auto;
} }

26
sass/_library/_print.scss
View file

@ -17,19 +17,19 @@
} }
p, p,
.#{$kna-namespace}p-like, .p-like,
h1, h1,
.#{$kna-namespace}h1-like, .h1-like,
h2, h2,
.#{$kna-namespace}h2-like, .h2-like,
h3, h3,
.#{$kna-namespace}h3-like, .h3-like,
h4, h4,
.#{$kna-namespace}h4-like, .h4-like,
h5, h5,
.#{$kna-namespace}h5-like, .h5-like,
h6, h6,
.#{$kna-namespace}h6-like, .h6-like,
blockquote, blockquote,
ul, ul,
ol { ol {
@ -37,17 +37,17 @@
margin: auto; margin: auto;
} }
.#{$kna-namespace}print { .print {
display: block; display: block;
} }
.#{$kna-namespace}no-print { .no-print {
display: none; display: none;
} }
/* no orphans, no widows */ /* no orphans, no widows */
p, p,
.#{$kna-namespace}p-like, .p-like,
blockquote { blockquote {
orphans: 3; orphans: 3;
widows: 3; widows: 3;
@ -69,11 +69,11 @@
/* no breaks after these elements */ /* no breaks after these elements */
h1, h1,
.#{$kna-namespace}h1-like, .h1-like,
h2, h2,
.#{$kna-namespace}h2-like, .h2-like,
h3, h3,
.#{$kna-namespace}h3-like, .h3-like,
caption { caption {
page-break-after: avoid; page-break-after: avoid;
} }

118
sass/_library/_responsive.scss
View file

@ -8,47 +8,47 @@
@media (min-width: $large) { @media (min-width: $large) {
/* layouts for large screens */ /* layouts for large screens */
.#{$kna-namespace}large-hidden { .large-hidden {
display: none !important; display: none !important;
} }
.#{$kna-namespace}large-visible { .large-visible {
display: block !important; display: block !important;
} }
.#{$kna-namespace}large-no-float { .large-no-float {
float: none; float: none;
} }
.#{$kna-namespace}large-inbl { .large-inbl {
display: inline-block; display: inline-block;
float: none; float: none;
vertical-align: top; vertical-align: top;
} }
/* widths for large screens */ /* widths for large screens */
.#{$kna-namespace}large-w25 { .large-w25 {
width: 25% !important; width: 25% !important;
} }
.#{$kna-namespace}large-w33 { .large-w33 {
width: 33.333333% !important; width: 33.333333% !important;
} }
.#{$kna-namespace}large-w50 { .large-w50 {
width: 50% !important; width: 50% !important;
} }
.#{$kna-namespace}large-w66 { .large-w66 {
width: 66.666666% !important; width: 66.666666% !important;
} }
.#{$kna-namespace}large-w75 { .large-w75 {
width: 75% !important; width: 75% !important;
} }
.#{$kna-namespace}large-w100, .large-w100,
.#{$kna-namespace}large-wauto { .large-wauto {
display: block !important; display: block !important;
float: none !important; float: none !important;
clear: none !important; clear: none !important;
@ -59,8 +59,8 @@
} }
/* margins for large screens */ /* margins for large screens */
.#{$kna-namespace}large-man, .large-man,
.#{$kna-namespace}large-ma0 { .large-ma0 {
margin: 0 !important; margin: 0 !important;
} }
} }
@ -71,47 +71,47 @@
@media (min-width: $medium) and (max-width: ($large - 1)) { @media (min-width: $medium) and (max-width: ($large - 1)) {
/* layouts for medium screens */ /* layouts for medium screens */
.#{$kna-namespace}medium-hidden { .medium-hidden {
display: none !important; display: none !important;
} }
.#{$kna-namespace}medium-visible { .medium-visible {
display: block !important; display: block !important;
} }
.#{$kna-namespace}medium-no-float { .medium-no-float {
float: none; float: none;
} }
.#{$kna-namespace}medium-inbl { .medium-inbl {
display: inline-block; display: inline-block;
float: none; float: none;
vertical-align: top; vertical-align: top;
} }
/* widths for medium screens */ /* widths for medium screens */
.#{$kna-namespace}medium-w25 { .medium-w25 {
width: 25% !important; width: 25% !important;
} }
.#{$kna-namespace}medium-w33 { .medium-w33 {
width: 33.333333% !important; width: 33.333333% !important;
} }
.#{$kna-namespace}medium-w50 { .medium-w50 {
width: 50% !important; width: 50% !important;
} }
.#{$kna-namespace}medium-w66 { .medium-w66 {
width: 66.666666% !important; width: 66.666666% !important;
} }
.#{$kna-namespace}medium-w75 { .medium-w75 {
width: 75% !important; width: 75% !important;
} }
.#{$kna-namespace}medium-w100, .medium-w100,
.#{$kna-namespace}medium-wauto { .medium-wauto {
display: block !important; display: block !important;
float: none !important; float: none !important;
clear: none !important; clear: none !important;
@ -122,8 +122,8 @@
} }
/* margins for medium screens */ /* margins for medium screens */
.#{$kna-namespace}medium-man, .medium-man,
.#{$kna-namespace}medium-ma0 { .medium-ma0 {
margin: 0 !important; margin: 0 !important;
} }
} }
@ -134,47 +134,47 @@
@media (min-width: $small) and (max-width: ($medium - 1)) { @media (min-width: $small) and (max-width: ($medium - 1)) {
/* layouts for small screens */ /* layouts for small screens */
.#{$kna-namespace}small-hidden { .small-hidden {
display: none !important; display: none !important;
} }
.#{$kna-namespace}small-visible { .small-visible {
display: block !important; display: block !important;
} }
.#{$kna-namespace}small-no-float { .small-no-float {
float: none; float: none;
} }
.#{$kna-namespace}small-inbl { .small-inbl {
display: inline-block; display: inline-block;
float: none; float: none;
vertical-align: top; vertical-align: top;
} }
/* widths for small screens */ /* widths for small screens */
.#{$kna-namespace}small-w25 { .small-w25 {
width: 25% !important; width: 25% !important;
} }
.#{$kna-namespace}small-w33 { .small-w33 {
width: 33.333333% !important; width: 33.333333% !important;
} }
.#{$kna-namespace}small-w50 { .small-w50 {
width: 50% !important; width: 50% !important;
} }
.#{$kna-namespace}small-w66 { .small-w66 {
width: 66.666666% !important; width: 66.666666% !important;
} }
.#{$kna-namespace}small-w75 { .small-w75 {
width: 75% !important; width: 75% !important;
} }
.#{$kna-namespace}small-w100, .small-w100,
.#{$kna-namespace}small-wauto { .small-wauto {
display: block !important; display: block !important;
float: none !important; float: none !important;
clear: none !important; clear: none !important;
@ -185,13 +185,13 @@
} }
/* margins for small screens */ /* margins for small screens */
.#{$kna-namespace}small-man, .small-man,
.#{$kna-namespace}small-ma0 { .small-ma0 {
margin: 0 !important; margin: 0 !important;
} }
.#{$kna-namespace}small-pan, .small-pan,
.#{$kna-namespace}small-pa0 { .small-pa0 {
padding: 0 !important; padding: 0 !important;
} }
@ -203,8 +203,8 @@
@media (max-width: $small - 1) { @media (max-width: $small - 1) {
/* quick small resolution reset */ /* quick small resolution reset */
.#{$kna-namespace}mod, .mod,
.#{$kna-namespace}col, .col,
fieldset { fieldset {
display: block !important; display: block !important;
float: none !important; float: none !important;
@ -215,52 +215,52 @@
border: 0; border: 0;
} }
.#{$kna-namespace}flex-container { .flex-container {
flex-direction: column; flex-direction: column;
} }
/* layouts for tiny screens */ /* layouts for tiny screens */
.#{$kna-namespace}tiny-hidden { .tiny-hidden {
display: none !important; display: none !important;
} }
.#{$kna-namespace}tiny-visible { .tiny-visible {
display: block !important; display: block !important;
} }
.#{$kna-namespace}tiny-no-float { .tiny-no-float {
float: none; float: none;
} }
.#{$kna-namespace}tiny-inbl { .tiny-inbl {
display: inline-block; display: inline-block;
float: none; float: none;
vertical-align: top; vertical-align: top;
} }
/* widths for tiny screens */ /* widths for tiny screens */
.#{$kna-namespace}tiny-w25 { .tiny-w25 {
width: 25% !important; width: 25% !important;
} }
.#{$kna-namespace}tiny-w33 { .tiny-w33 {
width: 33.333333% !important; width: 33.333333% !important;
} }
.#{$kna-namespace}tiny-w50 { .tiny-w50 {
width: 50% !important; width: 50% !important;
} }
.#{$kna-namespace}tiny-w66 { .tiny-w66 {
width: 66.666666% !important; width: 66.666666% !important;
} }
.#{$kna-namespace}tiny-w75 { .tiny-w75 {
width: 75% !important; width: 75% !important;
} }
.#{$kna-namespace}tiny-w100, .tiny-w100,
.#{$kna-namespace}tiny-wauto { .tiny-wauto {
display: block !important; display: block !important;
float: none !important; float: none !important;
clear: none !important; clear: none !important;
@ -271,13 +271,13 @@
} }
/* margins for tiny screens */ /* margins for tiny screens */
.#{$kna-namespace}tiny-man, .tiny-man,
.#{$kna-namespace}tiny-ma0 { .tiny-ma0 {
margin: 0 !important; margin: 0 !important;
} }
.#{$kna-namespace}tiny-pan, .tiny-pan,
.#{$kna-namespace}tiny-pa0 { .tiny-pa0 {
padding: 0 !important; padding: 0 !important;
} }

2
sass/_library/_styling.scss
View file

@ -81,7 +81,7 @@ q {
} }
q, q,
.#{$kna-namespace}q { .q {
quotes: "“\00a0" "\00a0”"; quotes: "“\00a0" "\00a0”";
&:lang(fr) { &:lang(fr) {

168
sass/_library/_utilities.scss
View file

@ -42,318 +42,318 @@ ul {
/* ------------- */ /* ------------- */
/* blocks widths (percentage and pixels) */ /* blocks widths (percentage and pixels) */
.#{$kna-namespace}w10 { .w10 {
width: 10%; width: 10%;
} }
.#{$kna-namespace}w20 { .w20 {
width: 20%; width: 20%;
} }
.#{$kna-namespace}w25 { .w25 {
width: 25%; width: 25%;
} }
.#{$kna-namespace}w30 { .w30 {
width: 30%; width: 30%;
} }
.#{$kna-namespace}w33 { .w33 {
width: 33.3333%; width: 33.3333%;
} }
.#{$kna-namespace}w40 { .w40 {
width: 40%; width: 40%;
} }
.#{$kna-namespace}w50 { .w50 {
width: 50%; width: 50%;
} }
.#{$kna-namespace}w60 { .w60 {
width: 60%; width: 60%;
} }
.#{$kna-namespace}w66 { .w66 {
width: 66.6666%; width: 66.6666%;
} }
.#{$kna-namespace}w70 { .w70 {
width: 70%; width: 70%;
} }
.#{$kna-namespace}w75 { .w75 {
width: 75%; width: 75%;
} }
.#{$kna-namespace}w80 { .w80 {
width: 80%; width: 80%;
} }
.#{$kna-namespace}w90 { .w90 {
width: 90%; width: 90%;
} }
.#{$kna-namespace}w100 { .w100 {
width: 100%; width: 100%;
} }
.#{$kna-namespace}w50p { .w50p {
width: 50px; width: 50px;
} }
.#{$kna-namespace}w100p { .w100p {
width: 100px; width: 100px;
} }
.#{$kna-namespace}w150p { .w150p {
width: 150px; width: 150px;
} }
.#{$kna-namespace}w200p { .w200p {
width: 200px; width: 200px;
} }
.#{$kna-namespace}w300p { .w300p {
width: 300px; width: 300px;
} }
@media (min-width: 401px) { @media (min-width: 401px) {
.#{$kna-namespace}w400p { .w400p {
width: 400px; width: 400px;
} }
.#{$kna-namespace}w500p { .w500p {
width: 500px; width: 500px;
} }
.#{$kna-namespace}w600p { .w600p {
width: 600px; width: 600px;
} }
} }
@media (min-width: 701px) { @media (min-width: 701px) {
.#{$kna-namespace}w700p { .w700p {
width: 700px; width: 700px;
} }
.#{$kna-namespace}w800p { .w800p {
width: 800px; width: 800px;
} }
} }
@media (min-width: 961px) { @media (min-width: 961px) {
.#{$kna-namespace}w960p { .w960p {
width: 960px; width: 960px;
} }
.#{$kna-namespace}mw960p { .mw960p {
max-width: 960px; max-width: 960px;
} }
.#{$kna-namespace}w1140p { .w1140p {
width: 1140px; width: 1140px;
} }
.#{$kna-namespace}mw1140p { .mw1140p {
max-width: 1140px; max-width: 1140px;
} }
} }
.#{$kna-namespace}wauto { .wauto {
width: auto; width: auto;
} }
/* Spacing Helpers */ /* Spacing Helpers */
/* --------------- */ /* --------------- */
.#{$kna-namespace}man, .man,
.#{$kna-namespace}ma0 { .ma0 {
margin: 0; margin: 0;
} }
.#{$kna-namespace}pan, .pan,
.#{$kna-namespace}pa0 { .pa0 {
padding: 0; padding: 0;
} }
.#{$kna-namespace}mas { .mas {
margin: $small-value; margin: $small-value;
} }
.#{$kna-namespace}mam { .mam {
margin: $medium-value; margin: $medium-value;
} }
.#{$kna-namespace}mal { .mal {
margin: $large-value; margin: $large-value;
} }
.#{$kna-namespace}pas { .pas {
padding: $small-value; padding: $small-value;
} }
.#{$kna-namespace}pam { .pam {
padding: $medium-value; padding: $medium-value;
} }
.#{$kna-namespace}pal { .pal {
padding: $large-value; padding: $large-value;
} }
.#{$kna-namespace}mtn, .mtn,
.#{$kna-namespace}mt0 { .mt0 {
margin-top: 0; margin-top: 0;
} }
.#{$kna-namespace}mts { .mts {
margin-top: $small-value; margin-top: $small-value;
} }
.#{$kna-namespace}mtm { .mtm {
margin-top: $medium-value; margin-top: $medium-value;
} }
.#{$kna-namespace}mtl { .mtl {
margin-top: $large-value; margin-top: $large-value;
} }
.#{$kna-namespace}mrn, .mrn,
.#{$kna-namespace}mr0 { .mr0 {
margin-right: 0; margin-right: 0;
} }
.#{$kna-namespace}mrs { .mrs {
margin-right: $small-value; margin-right: $small-value;
} }
.#{$kna-namespace}mrm { .mrm {
margin-right: $medium-value; margin-right: $medium-value;
} }
.#{$kna-namespace}mrl { .mrl {
margin-right: $large-value; margin-right: $large-value;
} }
.#{$kna-namespace}mbn, .mbn,
.#{$kna-namespace}mb0 { .mb0 {
margin-bottom: 0; margin-bottom: 0;
} }
.#{$kna-namespace}mbs { .mbs {
margin-bottom: $small-value; margin-bottom: $small-value;
} }
.#{$kna-namespace}mbm { .mbm {
margin-bottom: $medium-value; margin-bottom: $medium-value;
} }
.#{$kna-namespace}mbl { .mbl {
margin-bottom: $large-value; margin-bottom: $large-value;
} }
.#{$kna-namespace}mln, .mln,
.#{$kna-namespace}ml0 { .ml0 {
margin-left: 0; margin-left: 0;
} }
.#{$kna-namespace}mls { .mls {
margin-left: $small-value; margin-left: $small-value;
} }
.#{$kna-namespace}mlm { .mlm {
margin-left: $medium-value; margin-left: $medium-value;
} }
.#{$kna-namespace}mll { .mll {
margin-left: $large-value; margin-left: $large-value;
} }
.#{$kna-namespace}mauto { .mauto {
margin: auto; margin: auto;
} }
.#{$kna-namespace}mtauto { .mtauto {
margin-top: auto; margin-top: auto;
} }
.#{$kna-namespace}mrauto { .mrauto {
margin-right: auto; margin-right: auto;
} }
.#{$kna-namespace}mbauto { .mbauto {
margin-bottom: auto; margin-bottom: auto;
} }
.#{$kna-namespace}mlauto { .mlauto {
margin-left: auto; margin-left: auto;
} }
.#{$kna-namespace}ptn, .ptn,
.#{$kna-namespace}pt0 { .pt0 {
padding-top: 0; padding-top: 0;
} }
.#{$kna-namespace}pts { .pts {
padding-top: $small-value; padding-top: $small-value;
} }
.#{$kna-namespace}ptm { .ptm {
padding-top: $medium-value; padding-top: $medium-value;
} }
.#{$kna-namespace}ptl { .ptl {
padding-top: $large-value; padding-top: $large-value;
} }
.#{$kna-namespace}prn, .prn,
.#{$kna-namespace}pr0 { .pr0 {
padding-right: 0; padding-right: 0;
} }
.#{$kna-namespace}prs { .prs {
padding-right: $small-value; padding-right: $small-value;
} }
.#{$kna-namespace}prm { .prm {
padding-right: $medium-value; padding-right: $medium-value;
} }
.#{$kna-namespace}prl { .prl {
padding-right: $large-value; padding-right: $large-value;
} }
.#{$kna-namespace}pbn, .pbn,
.#{$kna-namespace}pb0 { .pb0 {
padding-bottom: 0; padding-bottom: 0;
} }
.#{$kna-namespace}pbs { .pbs {
padding-bottom: $small-value; padding-bottom: $small-value;
} }
.#{$kna-namespace}pbm { .pbm {
padding-bottom: $medium-value; padding-bottom: $medium-value;
} }
.#{$kna-namespace}pbl { .pbl {
padding-bottom: $large-value; padding-bottom: $large-value;
} }
.#{$kna-namespace}pln, .pln,
.#{$kna-namespace}pl0 { .pl0 {
padding-left: 0; padding-left: 0;
} }
.#{$kna-namespace}pls { .pls {
padding-left: $small-value; padding-left: $small-value;
} }
.#{$kna-namespace}plm { .plm {
padding-left: $medium-value; padding-left: $medium-value;
} }
.#{$kna-namespace}pll { .pll {
padding-left: $large-value; padding-left: $large-value;
} }

8
sass/components/forms.scss
View file

@ -7,7 +7,7 @@
*/ */
/* buttons */ /* buttons */
.#{$kna-namespace}btn { .btn {
display: inline-block; display: inline-block;
} }
@ -21,7 +21,7 @@ input,
button, button,
select, select,
label, label,
.#{$kna-namespace}btn { .btn {
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
} }
@ -78,7 +78,7 @@ textarea:-moz-placeholder {
color: #777; color: #777;
} }
.#{$kna-namespace}btn, .btn,
input[type="button"], input[type="button"],
button { button {
&:focus { &:focus {
@ -96,7 +96,7 @@ button,
input[type="button"], input[type="button"],
input[type="submit"], input[type="submit"],
input[type="reset"] { input[type="reset"] {
&.#{$kna-namespace}unstyled { &.unstyled {
padding: 0; padding: 0;
border: none; border: none;
line-height: 1; line-height: 1;

2
sass/components/skip-links.scss
View file

@ -4,7 +4,7 @@
/* see https://www.alsacreations.com/article/lire/572-Les-liens-d-evitement.html */ /* see https://www.alsacreations.com/article/lire/572-Les-liens-d-evitement.html */
/* styling skip links */ /* styling skip links */
.#{$kna-namespace}skip-links { .skip-links {
position: absolute; position: absolute;
& a { & a {

8
sass/components/tables.scss
View file

@ -3,7 +3,7 @@
/* ----------------------------- */ /* ----------------------------- */
table, table,
.#{$kna-namespace}table { .table {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
table-layout: fixed; table-layout: fixed;
@ -12,12 +12,12 @@ table,
margin-bottom: $medium-value; margin-bottom: $medium-value;
} }
.#{$kna-namespace}table { .table {
display: table; display: table;
} }
#recaptcha_table, #recaptcha_table,
.#{$kna-namespace}table-auto { .table-auto {
table-layout: auto; table-layout: auto;
} }
@ -30,7 +30,7 @@ th {
/* deco */ /* deco */
table, table,
.#{$kna-namespace}table { .table {
border: 1px solid #ccc; border: 1px solid #ccc;
} }