5e6bacda74
quasiment jamais utilisé en pratique, inutile dans un "framework"
297 lines
No EOL
2.5 KiB
Text
297 lines
No EOL
2.5 KiB
Text
/* ---------------------------------- */
|
|
/* ==visual helpers */
|
|
/* .. use them with parcimony ! */
|
|
/* ---------------------------------- */
|
|
|
|
/* blocks widths (percentage and pixels) */
|
|
.w10 {
|
|
width: 10%;
|
|
}
|
|
|
|
.w20 {
|
|
width: 20%;
|
|
}
|
|
|
|
.w25 {
|
|
width: 25%;
|
|
}
|
|
|
|
.w30 {
|
|
width: 30%;
|
|
}
|
|
|
|
.w33 {
|
|
width: 33.3333%;
|
|
}
|
|
|
|
.w40 {
|
|
width: 40%;
|
|
}
|
|
|
|
.w50 {
|
|
width: 50%;
|
|
}
|
|
|
|
.w60 {
|
|
width: 60%;
|
|
}
|
|
|
|
.w66 {
|
|
width: 66.6666%;
|
|
}
|
|
|
|
.w70 {
|
|
width: 70%;
|
|
}
|
|
|
|
.w75 {
|
|
width: 75%;
|
|
}
|
|
|
|
.w80 {
|
|
width: 80%;
|
|
}
|
|
|
|
.w90 {
|
|
width: 90%;
|
|
}
|
|
|
|
.w100 {
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.w50p {
|
|
width: 50px;
|
|
}
|
|
|
|
.w100p {
|
|
width: 100px;
|
|
}
|
|
|
|
.w150p {
|
|
width: 150px;
|
|
}
|
|
|
|
.w200p {
|
|
width: 200px;
|
|
}
|
|
|
|
.w300p {
|
|
width: 300px;
|
|
}
|
|
|
|
.w400p {
|
|
width: 400px;
|
|
}
|
|
|
|
.w500p {
|
|
width: 500px;
|
|
}
|
|
|
|
.w600p {
|
|
width: 600px;
|
|
}
|
|
|
|
.w700p {
|
|
width: 700px;
|
|
}
|
|
|
|
.w800p {
|
|
width: 800px;
|
|
}
|
|
|
|
.w960p {
|
|
width: 960px;
|
|
}
|
|
|
|
.mw960p {
|
|
max-width: 960px;
|
|
}
|
|
|
|
.w1140p {
|
|
width: 1140px;
|
|
}
|
|
|
|
.mw1140p {
|
|
max-width: 1140px;
|
|
}
|
|
|
|
.wauto {
|
|
width: auto;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.pan,
|
|
.pa0 {
|
|
padding: 0;
|
|
}
|
|
|
|
.mas {
|
|
margin: @small-value;
|
|
}
|
|
|
|
.mam {
|
|
margin: @medium-value;
|
|
}
|
|
|
|
.mal {
|
|
margin: @large-value;
|
|
}
|
|
|
|
.pas {
|
|
padding: @small-value;
|
|
}
|
|
|
|
.pam {
|
|
padding: @medium-value;
|
|
}
|
|
|
|
.pal {
|
|
padding: @large-value;
|
|
}
|
|
|
|
.mtn,
|
|
.mt0 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.mts {
|
|
margin-top: @small-value;
|
|
}
|
|
|
|
.mtm {
|
|
margin-top: @medium-value;
|
|
}
|
|
|
|
.mtl {
|
|
margin-top: @large-value;
|
|
}
|
|
|
|
.mrn,
|
|
.mr0 {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.mrs {
|
|
margin-right: @small-value;
|
|
}
|
|
|
|
.mrm {
|
|
margin-right: @medium-value;
|
|
}
|
|
|
|
.mrl {
|
|
margin-right: @large-value;
|
|
}
|
|
|
|
.mbn,
|
|
.mb0 {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.mbs {
|
|
margin-bottom: @small-value;
|
|
}
|
|
|
|
.mbm {
|
|
margin-bottom: @medium-value;
|
|
}
|
|
|
|
.mbl {
|
|
margin-bottom: @large-value;
|
|
}
|
|
|
|
.mln,
|
|
.ml0 {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.mls {
|
|
margin-left: @small-value;
|
|
}
|
|
|
|
.mlm {
|
|
margin-left: @medium-value;
|
|
}
|
|
|
|
.mll {
|
|
margin-left: @large-value;
|
|
}
|
|
|
|
.ptn,
|
|
.pt0 {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.pts {
|
|
padding-top: @small-value;
|
|
}
|
|
|
|
.ptm {
|
|
padding-top: @medium-value;
|
|
}
|
|
|
|
.ptl {
|
|
padding-top: @large-value;
|
|
}
|
|
|
|
.prn,
|
|
.pr0 {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.prs {
|
|
padding-right: @small-value;
|
|
}
|
|
|
|
.prm {
|
|
padding-right: @medium-value;
|
|
}
|
|
|
|
.prl {
|
|
padding-right: @large-value;
|
|
}
|
|
|
|
.pbn,
|
|
.pb0 {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.pbs {
|
|
padding-bottom: @small-value;
|
|
}
|
|
|
|
.pbm {
|
|
padding-bottom: @medium-value;
|
|
}
|
|
|
|
.pbl {
|
|
padding-bottom: @large-value;
|
|
}
|
|
|
|
.pln,
|
|
.pl0 {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.pls {
|
|
padding-left: @small-value;
|
|
}
|
|
|
|
.plm {
|
|
padding-left: @medium-value;
|
|
}
|
|
|
|
.pll {
|
|
padding-left: @large-value;
|
|
} |