KNACSS/sass/_06-helpers.scss

296 lines
2.5 KiB
SCSS
Raw Permalink Normal View History

2014-10-20 17:59:59 +02:00
/* ---------------------------------- */
/* ==visual helpers */
/* .. use them with parcimony ! */
/* ---------------------------------- */
/* blocks widths (percentage and pixels) */
.w10 {
width: 10%;
2014-10-20 17:59:59 +02:00
}
.w20 {
width: 20%;
2014-10-20 17:59:59 +02:00
}
.w25 {
width: 25%;
2014-10-20 17:59:59 +02:00
}
.w30 {
width: 30%;
2014-10-20 17:59:59 +02:00
}
.w33 {
width: 33.3333%;
2014-10-20 17:59:59 +02:00
}
.w40 {
width: 40%;
2014-10-20 17:59:59 +02:00
}
.w50 {
width: 50%;
2014-10-20 17:59:59 +02:00
}
.w60 {
width: 60%;
2014-10-20 17:59:59 +02:00
}
.w66 {
width: 66.6666%;
2014-10-20 17:59:59 +02:00
}
.w70 {
width: 70%;
2014-10-20 17:59:59 +02:00
}
.w75 {
width: 75%;
2014-10-20 17:59:59 +02:00
}
.w80 {
width: 80%;
2014-10-20 17:59:59 +02:00
}
.w90 {
width: 90%;
2014-10-20 17:59:59 +02:00
}
.w100 {
width: 100%;
2014-10-20 17:59:59 +02:00
}
.w50p {
width: 50px;
2014-10-20 17:59:59 +02:00
}
.w100p {
width: 100px;
2014-10-20 17:59:59 +02:00
}
.w150p {
width: 150px;
2014-10-20 17:59:59 +02:00
}
.w200p {
width: 200px;
2014-10-20 17:59:59 +02:00
}
.w300p {
width: 300px;
2014-10-20 17:59:59 +02:00
}
.w400p {
width: 400px;
2014-10-20 17:59:59 +02:00
}
.w500p {
width: 500px;
2014-10-20 17:59:59 +02:00
}
.w600p {
width: 600px;
2014-10-20 17:59:59 +02:00
}
.w700p {
width: 700px;
2014-10-20 17:59:59 +02:00
}
.w800p {
width: 800px;
2014-10-20 17:59:59 +02:00
}
.w960p {
width: 960px;
2014-10-20 17:59:59 +02:00
}
.mw960p {
max-width: 960px;
2014-10-20 17:59:59 +02:00
}
.w1140p {
width: 1140px;
2014-10-20 17:59:59 +02:00
}
.mw1140p {
max-width: 1140px;
2014-10-20 17:59:59 +02:00
}
.wauto {
width: auto;
2014-10-20 17:59:59 +02:00
}
/* spacing helpers
p,m = padding,margin
a,t,r,b,l = all,top,right,bottom,left
s,m,l,n = small, medium, large, none
*/
.man,
.ma0 {
margin: 0;
2014-10-20 17:59:59 +02:00
}
.pan,
.pa0 {
padding: 0;
2014-10-20 17:59:59 +02:00
}
.mas {
margin: $small-value;
2014-10-20 17:59:59 +02:00
}
.mam {
margin: $medium-value;
2014-10-20 17:59:59 +02:00
}
.mal {
margin: $large-value;
2014-10-20 17:59:59 +02:00
}
.pas {
padding: $small-value;
2014-10-20 17:59:59 +02:00
}
.pam {
padding: $medium-value;
2014-10-20 17:59:59 +02:00
}
.pal {
padding: $large-value;
2014-10-20 17:59:59 +02:00
}
.mtn,
.mt0 {
margin-top: 0;
2014-10-20 17:59:59 +02:00
}
.mts {
margin-top: $small-value;
2014-10-20 17:59:59 +02:00
}
.mtm {
margin-top: $medium-value;
2014-10-20 17:59:59 +02:00
}
.mtl {
margin-top: $large-value;
2014-10-20 17:59:59 +02:00
}
.mrn,
.mr0 {
margin-right: 0;
2014-10-20 17:59:59 +02:00
}
.mrs {
margin-right: $small-value;
2014-10-20 17:59:59 +02:00
}
.mrm {
margin-right: $medium-value;
2014-10-20 17:59:59 +02:00
}
.mrl {
margin-right: $large-value;
2014-10-20 17:59:59 +02:00
}
.mbn,
.mb0 {
margin-bottom: 0;
2014-10-20 17:59:59 +02:00
}
.mbs {
margin-bottom: $small-value;
2014-10-20 17:59:59 +02:00
}
.mbm {
margin-bottom: $medium-value;
2014-10-20 17:59:59 +02:00
}
.mbl {
margin-bottom: $large-value;
2014-10-20 17:59:59 +02:00
}
.mln,
.ml0 {
margin-left: 0;
2014-10-20 17:59:59 +02:00
}
.mls {
margin-left: $small-value;
2014-10-20 17:59:59 +02:00
}
.mlm {
margin-left: $medium-value;
2014-10-20 17:59:59 +02:00
}
.mll {
margin-left: $large-value;
2014-10-20 17:59:59 +02:00
}
.ptn,
.pt0 {
padding-top: 0;
2014-10-20 17:59:59 +02:00
}
.pts {
padding-top: $small-value;
2014-10-20 17:59:59 +02:00
}
.ptm {
padding-top: $medium-value;
2014-10-20 17:59:59 +02:00
}
.ptl {
padding-top: $large-value;
2014-10-20 17:59:59 +02:00
}
.prn,
.pr0 {
padding-right: 0;
2014-10-20 17:59:59 +02:00
}
.prs {
padding-right: $small-value;
2014-10-20 17:59:59 +02:00
}
.prm {
padding-right: $medium-value;
2014-10-20 17:59:59 +02:00
}
.prl {
padding-right: $large-value;
2014-10-20 17:59:59 +02:00
}
.pbn,
.pb0 {
padding-bottom: 0;
2014-10-20 17:59:59 +02:00
}
.pbs {
padding-bottom: $small-value;
2014-10-20 17:59:59 +02:00
}
.pbm {
padding-bottom: $medium-value;
2014-10-20 17:59:59 +02:00
}
.pbl {
padding-bottom: $large-value;
2014-10-20 17:59:59 +02:00
}
.pln,
.pl0 {
padding-left: 0;
2014-10-20 17:59:59 +02:00
}
.pls {
padding-left: $small-value;
2014-10-20 17:59:59 +02:00
}
.plm {
padding-left: $medium-value;
2014-10-20 17:59:59 +02:00
}
.pll {
padding-left: $large-value;
2014-10-20 17:59:59 +02:00
}