Restauration du $ avant les variables pour des raisons de compatibilité

This commit is contained in:
Arnaud CARIOU 2017-03-16 15:12:06 +01:00
parent 7e97249bae
commit 2aa7f8cb9d
18 changed files with 416 additions and 396 deletions

View file

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

View file

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

View file

@ -5,41 +5,41 @@
/* large screens */
/* ------------- */
@media (min-width: (medium + 1))
@media (min-width: ($medium + 1))
/* layouts for large screens */
.{kna-namespace}large-hidden
.{$kna-namespace}large-hidden
display none !important
.{kna-namespace}large-visible
.{$kna-namespace}large-visible
display block !important
.{kna-namespace}large-no-float
.{$kna-namespace}large-no-float
float none
.{kna-namespace}large-inbl
.{$kna-namespace}large-inbl
display inline-block
float none
vertical-align top
/* widths for large screens */
.{kna-namespace}large-w25
.{$kna-namespace}large-w25
width 25% !important
.{kna-namespace}large-w33
.{$kna-namespace}large-w33
width 33.333333% !important
.{kna-namespace}large-w50
.{$kna-namespace}large-w50
width 50% !important
.{kna-namespace}large-w66
.{$kna-namespace}large-w66
width 66.666666% !important
.{kna-namespace}large-w75
.{$kna-namespace}large-w75
width 75% !important
.{kna-namespace}large-w100
.{kna-namespace}large-wauto
.{$kna-namespace}large-w100
.{$kna-namespace}large-wauto
display block !important
float none !important
clear none !important
@ -49,48 +49,48 @@
border 0
/* margins for large screens */
.{kna-namespace}large-man
.{kna-namespace}large-ma0
.{$kna-namespace}large-man
.{$kna-namespace}large-ma0
margin 0 !important
/* medium screens */
/* -------------- */
@media (min-width: (small + 1)) and (max-width: large)
@media (min-width: ($small + 1)) and (max-width: $large)
/* layouts for medium screens */
.{kna-namespace}medium-hidden
.{$kna-namespace}medium-hidden
display none !important
.{kna-namespace}medium-visible
.{$kna-namespace}medium-visible
display block !important
.{kna-namespace}medium-no-float
.{$kna-namespace}medium-no-float
float none
.{kna-namespace}medium-inbl
.{$kna-namespace}medium-inbl
display inline-block
float none
vertical-align top
/* widths for medium screens */
.{kna-namespace}medium-w25
.{$kna-namespace}medium-w25
width 25% !important
.{kna-namespace}medium-w33
.{$kna-namespace}medium-w33
width 33.333333% !important
.{kna-namespace}medium-w50
.{$kna-namespace}medium-w50
width 50% !important
.{kna-namespace}medium-w66
.{$kna-namespace}medium-w66
width 66.666666% !important
.{kna-namespace}medium-w75
.{$kna-namespace}medium-w75
width 75% !important
.{kna-namespace}medium-w100
.{kna-namespace}medium-wauto
.{$kna-namespace}medium-w100
.{$kna-namespace}medium-wauto
display block !important
float none !important
clear none !important
@ -100,48 +100,48 @@
border 0
/* margins for medium screens */
.{kna-namespace}medium-man
.{kna-namespace}medium-ma0
.{$kna-namespace}medium-man
.{$kna-namespace}medium-ma0
margin 0 !important
/* small screens */
/* ------------- */
@media (min-width: (tiny + 1)) and (max-width: small)
@media (min-width: ($tiny + 1)) and (max-width: $small)
/* layouts for small screens */
.{kna-namespace}small-hidden
.{$kna-namespace}small-hidden
display none !important
.{kna-namespace}small-visible
.{$kna-namespace}small-visible
display block !important
.{kna-namespace}small-no-float
.{$kna-namespace}small-no-float
float none
.{kna-namespace}small-inbl
.{$kna-namespace}small-inbl
display inline-block
float none
vertical-align top
/* widths for small screens */
.{kna-namespace}small-w25
.{$kna-namespace}small-w25
width 25% !important
.{kna-namespace}small-w33
.{$kna-namespace}small-w33
width 33.333333% !important
.{kna-namespace}small-w50
.{$kna-namespace}small-w50
width 50% !important
.{kna-namespace}small-w66
.{$kna-namespace}small-w66
width 66.666666% !important
.{kna-namespace}small-w75
.{$kna-namespace}small-w75
width 75% !important
.{kna-namespace}small-w100
.{kna-namespace}small-wauto
.{$kna-namespace}small-w100
.{$kna-namespace}small-wauto
display block !important
float none !important
clear none !important
@ -151,22 +151,22 @@
border 0
/* margins for small screens */
.{kna-namespace}small-man
.{kna-namespace}small-ma0
.{$kna-namespace}small-man
.{$kna-namespace}small-ma0
margin 0 !important
.{kna-namespace}small-pan
.{kna-namespace}small-pa0
.{$kna-namespace}small-pan
.{$kna-namespace}small-pa0
padding 0 !important
/* tiny screens */
/* ------------ */
@media (max-width: tiny)
@media (max-width: $tiny)
/* quick small resolution reset */
.{kna-namespace}mod
.{kna-namespace}col
.{$kna-namespace}mod
.{$kna-namespace}col
fieldset
display block !important
float none !important
@ -176,42 +176,42 @@
margin-right 0 !important
border 0
.{kna-namespace}flex-container
.{$kna-namespace}flex-container
flex-direction column
/* layouts for tiny screens */
.{kna-namespace}tiny-hidden
.{$kna-namespace}tiny-hidden
display none !important
.{kna-namespace}tiny-visible
.{$kna-namespace}tiny-visible
display block !important
.{kna-namespace}tiny-no-float
.{$kna-namespace}tiny-no-float
float none
.{kna-namespace}tiny-inbl
.{$kna-namespace}tiny-inbl
display inline-block
float none
vertical-align top
/* widths for tiny screens */
.{kna-namespace}tiny-w25
.{$kna-namespace}tiny-w25
width 25% !important
.{kna-namespace}tiny-w33
.{$kna-namespace}tiny-w33
width 33.333333% !important
.{kna-namespace}tiny-w50
.{$kna-namespace}tiny-w50
width 50% !important
.{kna-namespace}tiny-w66
.{$kna-namespace}tiny-w66
width 66.666666% !important
.{kna-namespace}tiny-w75
.{$kna-namespace}tiny-w75
width 75% !important
.{kna-namespace}tiny-w100
.{kna-namespace}tiny-wauto
.{$kna-namespace}tiny-w100
.{$kna-namespace}tiny-wauto
display block !important
float none !important
clear none !important
@ -221,10 +221,10 @@
border 0
/* margins for tiny screens */
.{kna-namespace}tiny-man
.{kna-namespace}tiny-ma0
.{$kna-namespace}tiny-man
.{$kna-namespace}tiny-ma0
margin 0 !important
.{kna-namespace}tiny-pan
.{kna-namespace}tiny-pa0
.{$kna-namespace}tiny-pan
.{$kna-namespace}tiny-pa0
padding 0 !important