create folder and files in rep styl
This commit is contained in:
Arnaud CARIOU
parent
b33501b2b7
commit
7a8701c929
17 changed files with 2030 additions and 0 deletions
278
styl/utilities/_helpers.styl
Normal file
278
styl/utilities/_helpers.styl
Normal file
|
|
@ -0,0 +1,278 @@
|
|||
/* ---------------------------------- */
|
||||
/* ==Helpers */
|
||||
/* ---------------------------------- */
|
||||
|
||||
/* State Helpers */
|
||||
/* ------------- */
|
||||
|
||||
/* invisible for all */
|
||||
.is-hidden
|
||||
[hidden]
|
||||
display none
|
||||
|
||||
/* hidden but not for an assistive technology like a screen reader, Yahoo! method */
|
||||
.visually-hidden
|
||||
position absolute !important
|
||||
border 0 !important
|
||||
height 1px !important
|
||||
width 1px !important
|
||||
padding 0 !important
|
||||
overflow hidden !important
|
||||
clip rect(0, 0, 0, 0) !important
|
||||
|
||||
.is-disabled
|
||||
[disabled]
|
||||
opacity 0.5
|
||||
pointer-events none
|
||||
cursor not-allowed
|
||||
filter grayscale(1)
|
||||
|
||||
|
||||
ul
|
||||
&.is-unstyled
|
||||
&.unstyled
|
||||
list-style none
|
||||
padding-left 0
|
||||
|
||||
/* Width Helpers */
|
||||
/* ------------- */
|
||||
|
||||
/* blocks widths (percentage and pixels) */
|
||||
.{kna-namespace}w10
|
||||
width 10%
|
||||
|
||||
.{kna-namespace}w20
|
||||
width 20%
|
||||
|
||||
.{kna-namespace}w25
|
||||
width 25%
|
||||
|
||||
.{kna-namespace}w30
|
||||
width 30%
|
||||
|
||||
.{kna-namespace}w33
|
||||
width 33.3333%
|
||||
|
||||
.{kna-namespace}w40
|
||||
width 40%
|
||||
|
||||
.{kna-namespace}w50
|
||||
width 50%
|
||||
|
||||
.{kna-namespace}w60
|
||||
width 60%
|
||||
|
||||
.{kna-namespace}w66
|
||||
width 66.6666%
|
||||
|
||||
.{kna-namespace}w70
|
||||
width 70%
|
||||
|
||||
.{kna-namespace}w75
|
||||
width 75%
|
||||
|
||||
.{kna-namespace}w80
|
||||
width 80%
|
||||
|
||||
.{kna-namespace}w90
|
||||
width 90%
|
||||
|
||||
.{kna-namespace}w100
|
||||
width 100%
|
||||
|
||||
.{kna-namespace}w50p
|
||||
width 50px
|
||||
|
||||
.{kna-namespace}w100p
|
||||
width 100px
|
||||
|
||||
.{kna-namespace}w150p
|
||||
width 150px
|
||||
|
||||
.{kna-namespace}w200p
|
||||
width 200px
|
||||
|
||||
.{kna-namespace}w300p
|
||||
width 300px
|
||||
|
||||
@media (min-width: 401px)
|
||||
.{kna-namespace}w400p
|
||||
width 400px
|
||||
|
||||
.{kna-namespace}w500p
|
||||
width 500px
|
||||
|
||||
.{kna-namespace}w600p
|
||||
width 600px
|
||||
|
||||
@media (min-width: 701px)
|
||||
|
||||
.{kna-namespace}w700p
|
||||
width 700px
|
||||
|
||||
.{kna-namespace}w800p
|
||||
width 800px
|
||||
|
||||
@media (min-width: 961px)
|
||||
.{kna-namespace}w960p
|
||||
width 960px
|
||||
|
||||
.{kna-namespace}mw960p
|
||||
max-width 960px
|
||||
|
||||
.{kna-namespace}w1140p
|
||||
width 1140px
|
||||
|
||||
.{kna-namespace}mw1140p
|
||||
max-width 1140px
|
||||
|
||||
.{kna-namespace}wauto
|
||||
width auto
|
||||
|
||||
/* Spacing Helpers */
|
||||
/* --------------- */
|
||||
|
||||
.{kna-namespace}man
|
||||
.{kna-namespace}ma0
|
||||
margin 0
|
||||
|
||||
.{kna-namespace}pan
|
||||
.{kna-namespace}pa0
|
||||
padding 0
|
||||
|
||||
.{kna-namespace}mas
|
||||
margin small-value
|
||||
|
||||
.{kna-namespace}mam
|
||||
margin medium-value
|
||||
|
||||
.{kna-namespace}mal
|
||||
margin large-value
|
||||
|
||||
.{kna-namespace}pas
|
||||
padding small-value
|
||||
|
||||
.{kna-namespace}pam
|
||||
padding medium-value
|
||||
|
||||
.{kna-namespace}pal
|
||||
padding large-value
|
||||
|
||||
.{kna-namespace}mtn
|
||||
.{kna-namespace}mt0
|
||||
margin-top 0
|
||||
|
||||
.{kna-namespace}mts
|
||||
margin-top small-value
|
||||
|
||||
.{kna-namespace}mtm
|
||||
margin-top medium-value
|
||||
|
||||
.{kna-namespace}mtl
|
||||
margin-top large-value
|
||||
|
||||
.{kna-namespace}mrn
|
||||
.{kna-namespace}mr0
|
||||
margin-right 0
|
||||
|
||||
.{kna-namespace}mrs
|
||||
margin-right small-value
|
||||
|
||||
.{kna-namespace}mrm
|
||||
margin-right medium-value
|
||||
|
||||
.{kna-namespace}mrl
|
||||
margin-right large-value
|
||||
|
||||
.{kna-namespace}mbn
|
||||
.{kna-namespace}mb0
|
||||
margin-bottom 0
|
||||
|
||||
.{kna-namespace}mbs
|
||||
margin-bottom small-value
|
||||
|
||||
.{kna-namespace}mbm
|
||||
margin-bottom medium-value
|
||||
|
||||
.{kna-namespace}mbl
|
||||
margin-bottom large-value
|
||||
|
||||
.{kna-namespace}mln
|
||||
.{kna-namespace}ml0
|
||||
margin-left 0
|
||||
|
||||
.{kna-namespace}mls
|
||||
margin-left small-value
|
||||
|
||||
.{kna-namespace}mlm
|
||||
margin-left medium-value
|
||||
|
||||
.{kna-namespace}mll
|
||||
margin-left large-value
|
||||
|
||||
.{kna-namespace}mauto
|
||||
margin auto
|
||||
|
||||
.{kna-namespace}mtauto
|
||||
margin-top auto
|
||||
|
||||
.{kna-namespace}mrauto
|
||||
margin-right auto
|
||||
|
||||
.{kna-namespace}mbauto
|
||||
margin-bottom auto
|
||||
|
||||
.{kna-namespace}mlauto
|
||||
margin-left: auto
|
||||
|
||||
.{kna-namespace}ptn
|
||||
.{kna-namespace}pt0
|
||||
padding-top 0
|
||||
|
||||
.{kna-namespace}pts
|
||||
padding-top small-value
|
||||
|
||||
.{kna-namespace}ptm
|
||||
padding-top medium-value
|
||||
|
||||
.{kna-namespace}ptl
|
||||
padding-top large-value
|
||||
|
||||
.{kna-namespace}prn
|
||||
.{kna-namespace}pr0
|
||||
padding-right 0
|
||||
|
||||
.{kna-namespace}prs
|
||||
padding-right small-value
|
||||
|
||||
.{kna-namespace}prm
|
||||
padding-right medium-value
|
||||
|
||||
.{kna-namespace}prl
|
||||
padding-right large-value
|
||||
|
||||
.{kna-namespace}pbn
|
||||
.{kna-namespace}pb0
|
||||
padding-bottom 0
|
||||
|
||||
.{kna-namespace}pbs
|
||||
padding-bottom small-value
|
||||
|
||||
.{kna-namespace}pbm
|
||||
padding-bottom medium-value
|
||||
|
||||
.{kna-namespace}pbl
|
||||
padding-bottom large-value
|
||||
|
||||
.{kna-namespace}pln
|
||||
.{kna-namespace}pl0
|
||||
padding-left 0
|
||||
|
||||
.{kna-namespace}pls
|
||||
padding-left small-value
|
||||
|
||||
.{kna-namespace}plm
|
||||
padding-left medium-value
|
||||
|
||||
.{kna-namespace}pll
|
||||
padding-left large-value
|
||||
98
styl/utilities/_layout.styl
Normal file
98
styl/utilities/_layout.styl
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
/* ----------------------------- */
|
||||
/* ==Global Layout */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* module, gains superpower "BFC" Block Formating Context */
|
||||
.mod
|
||||
.bfc
|
||||
overflow hidden
|
||||
|
||||
/* blocks that needs to be placed under floats */
|
||||
.clear
|
||||
clear both
|
||||
|
||||
/* blocks that must contain floats */
|
||||
.clearfix
|
||||
&::after
|
||||
content ""
|
||||
display table
|
||||
clear both
|
||||
border-collapse collapse
|
||||
|
||||
/* simple blocks alignment */
|
||||
.{kna-namespace}left
|
||||
margin-right auto
|
||||
|
||||
.{kna-namespace}right
|
||||
margin-left auto
|
||||
|
||||
.{kna-namespace}center
|
||||
margin-left auto
|
||||
margin-right auto
|
||||
|
||||
/* text and contents alignment */
|
||||
.{kna-namespace}txtleft
|
||||
text-align left
|
||||
|
||||
.{kna-namespace}txtright
|
||||
text-align right
|
||||
|
||||
.{kna-namespace}txtcenter
|
||||
text-align center
|
||||
|
||||
/* floating elements */
|
||||
.{kna-namespace}fl
|
||||
float left
|
||||
|
||||
img.{kna-namespace}fl
|
||||
margin-right small-value
|
||||
|
||||
.{kna-namespace}fr
|
||||
float right
|
||||
|
||||
img.{kna-namespace}fr
|
||||
margin-left small-value
|
||||
|
||||
img.{kna-namespace}fl
|
||||
img.{kna-namespace}fr
|
||||
margin-bottom tiny-value
|
||||
|
||||
/* inline-block */
|
||||
.{kna-namespace}inbl
|
||||
display inline-block
|
||||
vertical-align top
|
||||
|
||||
/* flexbox layout
|
||||
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
||||
*/
|
||||
|
||||
[class*="{kna-namespace}flex-container"]
|
||||
.{kna-namespace}flex-container
|
||||
display flex
|
||||
flex-wrap wrap
|
||||
|
||||
.{kna-namespace}flex-container-h
|
||||
flex-direction row
|
||||
|
||||
.{kna-namespace}flex-container-v
|
||||
flex-direction column
|
||||
|
||||
.{kna-namespace}flex-item-fluid
|
||||
flex 1
|
||||
min-width 0
|
||||
|
||||
.{kna-namespace}flex-item-first
|
||||
.{kna-namespace}item-first
|
||||
order -1
|
||||
|
||||
.{kna-namespace}flex-item-medium
|
||||
.{kna-namespace}item-medium
|
||||
order 0
|
||||
|
||||
.{kna-namespace}flex-item-last
|
||||
.{kna-namespace}item-last
|
||||
order 1
|
||||
|
||||
.{kna-namespace}flex-item-center
|
||||
.{kna-namespace}item-center
|
||||
margin auto
|
||||
230
styl/utilities/_responsive.styl
Normal file
230
styl/utilities/_responsive.styl
Normal file
|
|
@ -0,0 +1,230 @@
|
|||
/* -------------------------- */
|
||||
/* ==Responsive helpers */
|
||||
/* -------------------------- */
|
||||
|
||||
/* large screens */
|
||||
/* ------------- */
|
||||
|
||||
@media (min-width: (medium + 1))
|
||||
|
||||
/* layouts for large screens */
|
||||
.{kna-namespace}large-hidden
|
||||
display none !important
|
||||
|
||||
.{kna-namespace}large-visible
|
||||
display block !important
|
||||
|
||||
.{kna-namespace}large-no-float
|
||||
float none
|
||||
|
||||
.{kna-namespace}large-inbl
|
||||
display inline-block
|
||||
float none
|
||||
vertical-align top
|
||||
|
||||
/* widths for large screens */
|
||||
.{kna-namespace}large-w25
|
||||
width 25% !important
|
||||
|
||||
.{kna-namespace}large-w33
|
||||
width 33.333333% !important
|
||||
|
||||
.{kna-namespace}large-w50
|
||||
width 50% !important
|
||||
|
||||
.{kna-namespace}large-w66
|
||||
width 66.666666% !important
|
||||
|
||||
.{kna-namespace}large-w75
|
||||
width 75% !important
|
||||
|
||||
.{kna-namespace}large-w100
|
||||
.{kna-namespace}large-wauto
|
||||
display block !important
|
||||
float none !important
|
||||
clear none !important
|
||||
width auto !important
|
||||
margin-left 0 !important
|
||||
margin-right 0 !important
|
||||
border 0
|
||||
|
||||
/* margins for large screens */
|
||||
.{kna-namespace}large-man
|
||||
.{kna-namespace}large-ma0
|
||||
margin 0 !important
|
||||
|
||||
/* medium screens */
|
||||
/* -------------- */
|
||||
|
||||
@media (min-width: (small + 1)) and (max-width: large)
|
||||
|
||||
/* layouts for medium screens */
|
||||
.{kna-namespace}medium-hidden
|
||||
display none !important
|
||||
|
||||
.{kna-namespace}medium-visible
|
||||
display block !important
|
||||
|
||||
.{kna-namespace}medium-no-float
|
||||
float none
|
||||
|
||||
.{kna-namespace}medium-inbl
|
||||
display inline-block
|
||||
float none
|
||||
vertical-align top
|
||||
|
||||
/* widths for medium screens */
|
||||
.{kna-namespace}medium-w25
|
||||
width 25% !important
|
||||
|
||||
.{kna-namespace}medium-w33
|
||||
width 33.333333% !important
|
||||
|
||||
.{kna-namespace}medium-w50
|
||||
width 50% !important
|
||||
|
||||
.{kna-namespace}medium-w66
|
||||
width 66.666666% !important
|
||||
|
||||
.{kna-namespace}medium-w75
|
||||
width 75% !important
|
||||
|
||||
.{kna-namespace}medium-w100
|
||||
.{kna-namespace}medium-wauto
|
||||
display block !important
|
||||
float none !important
|
||||
clear none !important
|
||||
width auto !important
|
||||
margin-left 0 !important
|
||||
margin-right 0 !important
|
||||
border 0
|
||||
|
||||
/* margins for medium screens */
|
||||
.{kna-namespace}medium-man
|
||||
.{kna-namespace}medium-ma0
|
||||
margin 0 !important
|
||||
|
||||
/* small screens */
|
||||
/* ------------- */
|
||||
|
||||
@media (min-width: (tiny + 1)) and (max-width: small)
|
||||
|
||||
/* layouts for small screens */
|
||||
.{kna-namespace}small-hidden
|
||||
display none !important
|
||||
|
||||
.{kna-namespace}small-visible
|
||||
display block !important
|
||||
|
||||
.{kna-namespace}small-no-float
|
||||
float none
|
||||
|
||||
.{kna-namespace}small-inbl
|
||||
display inline-block
|
||||
float none
|
||||
vertical-align top
|
||||
|
||||
/* widths for small screens */
|
||||
.{kna-namespace}small-w25
|
||||
width 25% !important
|
||||
|
||||
.{kna-namespace}small-w33
|
||||
width 33.333333% !important
|
||||
|
||||
.{kna-namespace}small-w50
|
||||
width 50% !important
|
||||
|
||||
.{kna-namespace}small-w66
|
||||
width 66.666666% !important
|
||||
|
||||
.{kna-namespace}small-w75
|
||||
width 75% !important
|
||||
|
||||
.{kna-namespace}small-w100
|
||||
.{kna-namespace}small-wauto
|
||||
display block !important
|
||||
float none !important
|
||||
clear none !important
|
||||
width auto !important
|
||||
margin-left 0 !important
|
||||
margin-right 0 !important
|
||||
border 0
|
||||
|
||||
/* margins for small screens */
|
||||
.{kna-namespace}small-man
|
||||
.{kna-namespace}small-ma0
|
||||
margin 0 !important
|
||||
|
||||
.{kna-namespace}small-pan
|
||||
.{kna-namespace}small-pa0
|
||||
padding 0 !important
|
||||
|
||||
/* tiny screens */
|
||||
/* ------------ */
|
||||
|
||||
@media (max-width: tiny)
|
||||
|
||||
/* quick small resolution reset */
|
||||
.{kna-namespace}mod
|
||||
.{kna-namespace}col
|
||||
fieldset
|
||||
display block !important
|
||||
float none !important
|
||||
clear none !important
|
||||
width auto !important
|
||||
margin-left 0 !important
|
||||
margin-right 0 !important
|
||||
border 0
|
||||
|
||||
.{kna-namespace}flex-container
|
||||
flex-direction column
|
||||
|
||||
/* layouts for tiny screens */
|
||||
.{kna-namespace}tiny-hidden
|
||||
display none !important
|
||||
|
||||
.{kna-namespace}tiny-visible
|
||||
display block !important
|
||||
|
||||
.{kna-namespace}tiny-no-float
|
||||
float none
|
||||
|
||||
.{kna-namespace}tiny-inbl
|
||||
display inline-block
|
||||
float none
|
||||
vertical-align top
|
||||
|
||||
/* widths for tiny screens */
|
||||
.{kna-namespace}tiny-w25
|
||||
width 25% !important
|
||||
|
||||
.{kna-namespace}tiny-w33
|
||||
width 33.333333% !important
|
||||
|
||||
.{kna-namespace}tiny-w50
|
||||
width 50% !important
|
||||
|
||||
.{kna-namespace}tiny-w66
|
||||
width 66.666666% !important
|
||||
|
||||
.{kna-namespace}tiny-w75
|
||||
width 75% !important
|
||||
|
||||
.{kna-namespace}tiny-w100
|
||||
.{kna-namespace}tiny-wauto
|
||||
display block !important
|
||||
float none !important
|
||||
clear none !important
|
||||
width auto !important
|
||||
margin-left 0 !important
|
||||
margin-right 0 !important
|
||||
border 0
|
||||
|
||||
/* margins for tiny screens */
|
||||
.{kna-namespace}tiny-man
|
||||
.{kna-namespace}tiny-ma0
|
||||
margin 0 !important
|
||||
|
||||
.{kna-namespace}tiny-pan
|
||||
.{kna-namespace}tiny-pa0
|
||||
padding 0 !important
|
||||
Loading…
Add table
Add a link
Reference in a new issue