gui.less 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592
  1. /*
  2. * www.g-u-i.net
  3. */
  4. // =
  5. // =
  6. // =
  7. // =
  8. // =
  9. // ===== TYPOGRAHIE ======================================================================================================
  10. .8(){font-size:8px;}
  11. .9(){font-size:9px;}
  12. .10(){font-size:10px;}
  13. .11(){font-size:10px;}
  14. .12(){font-size:12px;}
  15. .14(){font-size:14px;}
  16. .16(){font-size:16px;}
  17. .18(){font-size:18px;}
  18. .20(){font-size:20px;}
  19. .24(){font-size:24px;}
  20. .28(){font-size:24px;}
  21. .30(){font-size:30px;}
  22. .36(){font-size:36px;}
  23. .48(){font-size:48px;}
  24. .60(){font-size:60px;}
  25. .72(){font-size:72px;}
  26. .regular(){font-weight:normal;}
  27. .bold(){font-weight:bold;}
  28. .100(){font-weight:100;}
  29. .200(){font-weight:200;}
  30. .300(){font-weight:300;}
  31. .400(){font-weight:400;}
  32. .500(){font-weight:500;}
  33. .600(){font-weight:600;}
  34. .700(){font-weight:700;}
  35. .800(){font-weight:800;}
  36. .900(){font-weight:900;}
  37. .upper(){text-transform: uppercase;}
  38. .italic(){font-style:italic;}
  39. .normal(){font-style: normal;}
  40. .hyphens(@value: auto)
  41. {
  42. -webkit-hyphens:@value;
  43. -moz-hyphens:@value;
  44. -ms-hyphens:@value;
  45. -o-hyphens:@value;
  46. hyphens:@value;
  47. }
  48. .font-size(@value: 1em,@lineheight:1.3em)
  49. {
  50. font-size:@value;
  51. line-height:@lineheight;
  52. }
  53. @green:#17942A;
  54. @red:#E60000;
  55. // =
  56. // =
  57. // =
  58. // =
  59. // =
  60. // ===== SHORTCUTS =======================================================================================================
  61. // padding
  62. .p(@p){ padding:@arguments; }
  63. .p(@v, @h){ padding:@arguments; }
  64. .p(@t, @l, @b, @l){ padding:@arguments; }
  65. .pt(@p){ padding-top:@p; }
  66. .pr(@p){ padding-right:@p; }
  67. .pb(@p){ padding-bottom:@p; }
  68. .pl(@p){ padding-left:@p; }
  69. // margin
  70. .m(@p){ margin:@arguments; }
  71. .m(@v, @h){ margin:@arguments; }
  72. .m(@t, @l, @b, @l){ margin:@arguments; }
  73. .mt(@m){ margin-top:@m; }
  74. .mr(@m){ margin-right:@m; }
  75. .mb(@m){ margin-bottom:@m; }
  76. .ml(@m){ margin-left:@m; }
  77. .0(){ margin:0; padding:0; }
  78. // border
  79. .b(@b){ border: @b; }
  80. .b(@size, @color){ border: @size solid @color; }
  81. .bt(@b){ border-top: @b;}
  82. .bt(@size, @color){border-top: @size solid @color;}
  83. .br(@b){ border-right: @b;}
  84. .br(@size, @color){border-right: @size solid @color;}
  85. .bb(@b){ border-bottom: @b;}
  86. .bb(@size, @color){border-bottom: @size solid @color;}
  87. .bl(@b){ border-left: @b;}
  88. .bl(@size, @color){border-left: @size solid @color;}
  89. .bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE)
  90. {
  91. border-top : solid 1px @top-color;
  92. border-right : solid 1px @right-color;
  93. border-bottom: solid 1px @bottom-color;
  94. border-left : solid 1px @left-color;
  95. }
  96. // Background
  97. .bg(@color, @url, @repeat, @scrollfixed, @pos){background: @arguments;}
  98. .bgc(@color){background-color: @arguments;}
  99. .bkgd(@params){background: @arguments;}
  100. .bkgdc(@color){.bgc(@arguments);}
  101. .bgca(@r, @g, @b, @a){
  102. background-color: rgb(@r, @g, @b); // ie8
  103. background-color: rgba(@r, @g, @b, @a);
  104. *background-color: rgb(@r, @g, @b); // ie7
  105. };
  106. // Selection
  107. .selection(@bgcolor,@color)
  108. {
  109. &::selection {
  110. background:@bgcolor;
  111. color:@color;
  112. }
  113. &::-moz-selection {
  114. background:@bgcolor;
  115. color:@color;
  116. }
  117. &::-webkit-selection {
  118. background:@bgcolor;
  119. color:@color;
  120. }
  121. }
  122. // Colors
  123. .color(@value)
  124. {
  125. &,
  126. & *{color:@value;}
  127. }
  128. // Opacity
  129. .opacity(@opacity: 0.5)
  130. {
  131. -webkit-opacity: @opacity;
  132. -khtml-opacity: @opacity;
  133. -moz-opacity: @opacity;
  134. opacity: @opacity;
  135. }
  136. // size
  137. .size(@height, @width) {
  138. width: @width;
  139. height: @height;
  140. }
  141. .square(@size) {
  142. .size(@size, @size);
  143. }
  144. // center
  145. .center-block() {
  146. display: block;
  147. margin-left: auto;
  148. margin-right: auto;
  149. }
  150. // =
  151. // =
  152. // =
  153. // =
  154. // =
  155. // ===== DISPLAY UTILS ===================================================================================================
  156. // Inline blocks
  157. .inlineblock(@align:top)
  158. {
  159. display:moz-inline-stack;
  160. display:inline-block;
  161. vertical-align:@align;
  162. zoom:1;
  163. *display:inline;
  164. // .ie7 &, .ie8 &{display:block;float:left;}
  165. }
  166. .db(){display:block;}
  167. .dbn(){display:none;}
  168. .dib(){.inlineblock;}
  169. .dib(@align){.inlineblock(@align);}
  170. .float(@align:left){
  171. .db; float:@align;
  172. }
  173. .abs(@value) { position:absolute; top:@value; left:@value; bottom:@value; right:@value; }
  174. .abs(@top, @left) { position:absolute; top:@top; left:@left; }
  175. .abs(@top, @right, @bottom, @left) { position:absolute; top:@top; left:@left; bottom:@bottom; right:@right; };
  176. .fix(@value) { position:fixed; top:@value; left:@value; bottom:@value; right:@value; }
  177. .fix(@top, @left) { position:fixed; top:@top; left:@left; }
  178. .fix(@top, @right, @bottom, @left) { position:fixed; top:@top; left:@left; bottom:@bottom; right:@right; };
  179. // Columns system
  180. @g:0;
  181. .g() { width:@g; }
  182. .col(@col,@coltotal:@n,@gutter:@g) {
  183. width: @col * ( 100% - ((@coltotal - 1) * @gutter) ) / @coltotal + ((@col - 1) * @gutter);
  184. }
  185. .inside-left(@col,@coltotal:@n,@gutter:@g) {
  186. padding-left: @col * ( 100% - ((@coltotal - 1) * @gutter) ) / @coltotal + (@col * @gutter);
  187. }
  188. .inside-right(@col,@coltotal:@n,@gutter:@g) {
  189. padding-right: @col * ( 100% - ((@coltotal - 1) * @gutter) ) / @coltotal + (@col * @gutter);
  190. }
  191. // Vertical alignement
  192. //
  193. // ___ .align-child()
  194. // |
  195. // | Permet l’alignement vertical d’un objet par rapport à son premier parent (dans son conteneur direct).
  196. // |
  197. // | 1 param : @vertical-align
  198. //
  199. .align-child(@align:middle){
  200. &:before { content: ""; .dib(middle); overflow: hidden; visibility: hidden; width: 0; height: 100%; }
  201. & > * { .dib(@align); }
  202. }
  203. .clear-after(){
  204. &:after{clear:both;content:'';display:block;height:0px;overflow:hidden;visibility:hidden;width:0px;}
  205. }
  206. // For clearing floats like a boss h5bp.com/q
  207. .clearix() {
  208. *zoom: 1;
  209. &:before,
  210. &:after {
  211. display: table;
  212. content: "";
  213. // Fixes Opera/contenteditable bug:
  214. // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
  215. line-height: 0;
  216. }
  217. &:after {
  218. clear: both;
  219. }
  220. }
  221. // =
  222. // =
  223. // =
  224. // =
  225. // =
  226. // ===== CSS3 ============================================================================================================
  227. // Gradients
  228. .gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF)
  229. {
  230. background: @color;
  231. background: -webkit-gradient(linear,
  232. left bottom,
  233. left top,
  234. color-stop(0, @start),
  235. color-stop(1, @stop));
  236. background: -ms-linear-gradient(bottom,
  237. @start,
  238. @stop);
  239. background: -moz-linear-gradient(center bottom,
  240. @start 0%,
  241. @stop 100%);
  242. }
  243. .bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255)
  244. {
  245. background: @color;
  246. background: -webkit-gradient(linear,
  247. left bottom,
  248. left top,
  249. color-stop(0, rgb(@start,@start,@start)),
  250. color-stop(1, rgb(@stop,@stop,@stop)));
  251. background: -ms-linear-gradient(bottom,
  252. rgb(@start,@start,@start) 0%,
  253. rgb(@start,@start,@start) 100%);
  254. background: -moz-linear-gradient(center bottom,
  255. rgb(@start,@start,@start) 0%,
  256. rgb(@stop,@stop,@stop) 100%);
  257. }
  258. // Shadows
  259. //
  260. // ___ .box-shadow()
  261. // |
  262. // | Ombré extérieur.
  263. // |
  264. // | 1 param : @blur
  265. // | 2+ params : @horizontal / @vertical / @blur / @color: #000 / @spread: 0px
  266. //
  267. // ___ .inset-shadow()
  268. // |
  269. // | Ombré intérieur.
  270. // |
  271. // | 1 param : @blur
  272. // | 2+ params : @horizontal / @vertical / @blur / @color: #000 / @spread: 0px
  273. //
  274. .box-shadow(@blur: 9px)
  275. {
  276. filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000');
  277. -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000')";
  278. -webkit-box-shadow: 0 0 @blur #000;
  279. -moz-box-shadow: 0 0 @blur #000;
  280. -ms-box-shadow: 0 0 @blur #000;
  281. box-shadow: 0 0 @blur #000;
  282. }
  283. .box-shadow(@x, @y, @blur: 9px, @color: #000, @spread: 0px)
  284. {
  285. filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=@x, OffY=@y, Color=~'@{color}');
  286. -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=@{x}, OffY=@{y}, Color='@{color}')";
  287. -webkit-box-shadow: @x @y @blur @spread @color;
  288. -moz-box-shadow: @x @y @blur @spread @color;
  289. -ms-box-shadow: @x @y @blur @spread @color;
  290. box-shadow: @x @y @blur @spread @color;
  291. }
  292. .inset-shadow(@blur: 9px)
  293. {
  294. filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000');
  295. -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='#000')";
  296. -webkit-box-shadow: 0 0 @blur #000 inset;
  297. -moz-box-shadow: 0 0 @blur #000 inset;
  298. -ms-box-shadow: 0 0 @blur #000 inset;
  299. box-shadow: 0 0 @blur #000 inset;
  300. }
  301. .inset-shadow(@x, @y, @blur: 9px, @color: #000, @spread: 0px)
  302. {
  303. filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=@x, OffY=@y, Color=~'@{color}');
  304. -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=0, Color='@{color}')";
  305. -webkit-box-shadow: @x @y @blur @spread @color inset;
  306. -moz-box-shadow: @x @y @blur @spread @color inset;
  307. -ms-box-shadow: @x @y @blur @spread @color inset;
  308. box-shadow: @x @y @blur @spread @color inset;
  309. }
  310. .drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1)
  311. {
  312. -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  313. -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  314. box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
  315. }
  316. // Border radius
  317. .rounded(@radius: 2px)
  318. {
  319. -webkit-border-radius: @radius;
  320. -moz-border-radius: @radius;
  321. border-radius: @radius;
  322. -webkit-background-clip: padding-box;
  323. -moz-background-clip: padding;
  324. background-clip: padding-box;
  325. }
  326. .border-radius(@topleft: 0, @topright: 0, @bottomright: 0, @bottomleft: 0)
  327. {
  328. -webkit-border-radius:@arguments;
  329. -moz-border-radius:@arguments;
  330. border-radius:@arguments;
  331. -webkit-background-clip: padding-box;
  332. -moz-background-clip: padding;
  333. background-clip: padding-box;
  334. }
  335. // transitions
  336. .transition-simply-prefix(@string) {
  337. -webkit-transition: @string;
  338. -moz-transition: @string;
  339. -o-transition: @string;
  340. transition: @string;
  341. }
  342. //
  343. // ___ .transition()
  344. // |
  345. // | 1 param : @property
  346. // | 2 params : @property / @duration
  347. // | 3+ params : @property / @duration / @transitiondelay:0s , @timingfunction:ease-out
  348. //
  349. // ___ .transitions()
  350. // |
  351. // | Permet de fixer des paramètres spécifique par propriétés, exemple:
  352. // |
  353. // | .transitions(
  354. // | 'height , padding , margin , box-shadow',
  355. // | '.5s , .2s , .2s , .2s',
  356. // | '0s , 0s , 0s , .3s',
  357. // | 'linear , ease-out , linear , ease-out'
  358. // | );
  359. //
  360. .transition(@property: all)
  361. {
  362. -webkit-transition: @property;
  363. -moz-transition: @property;
  364. -o-transition: @property;
  365. transition: @property;
  366. }
  367. .transition(@property, @duration)
  368. {
  369. -webkit-transition: @arguments;
  370. -moz-transition: @arguments;
  371. -o-transition: @arguments;
  372. transition: @arguments;
  373. }
  374. .transition(@property, @duration, @transitiondelay, @timingfunction:ease-out)
  375. {
  376. -webkit-transition: @arguments;
  377. -moz-transition: @arguments;
  378. -o-transition: @arguments;
  379. transition: @arguments;
  380. }
  381. .transitions(@property: all, @duration:0s, @transitiondelay:0s, @timingfunction:ease-out)
  382. {
  383. -webkit-transition-property :~'@{property}';
  384. -webkit-transition-duration :~'@{duration}';
  385. -webkit-transition-delay :~'@{transitiondelay}';
  386. -webkit-transition-timing-function:~'@{timingfunction}';
  387. -moz-transition-property :~'@{property}';
  388. -moz-transition-duration :~'@{duration}';
  389. -moz-transition-delay :~'@{transitiondelay}';
  390. -moz-transition-timing-function:~'@{timingfunction}';
  391. -o-transition-property :~'@{property}';
  392. -o-transition-duration :~'@{duration}';
  393. -o-transition-delay :~'@{transitiondelay}';
  394. -o-transition-timing-function:~'@{timingfunction}';
  395. transition-property :~'@{property}';
  396. transition-duration :~'@{duration}';
  397. transition-delay :~'@{transitiondelay}';
  398. transition-timing-function:~'@{timingfunction}';
  399. }
  400. .transitions-duration(@duration: 0s)
  401. {
  402. -webkit-transition-duration: ~'@{duration}';
  403. -moz-transition-duration: ~'@{duration}';
  404. -o-transition-duration: ~'@{duration}';
  405. transition-duration: ~'@{duration}';
  406. }
  407. .transition-duration(@duration: 0.2s)
  408. {
  409. -webkit-transition-duration: @duration;
  410. -moz-transition-duration: @duration;
  411. -o-transition-duration: @duration;
  412. transition-duration: @duration;
  413. }
  414. .transitions-delay(@delay: 0s)
  415. {
  416. -webkit-transition-delay: ~'@{delay}';
  417. -moz-transition-delay: ~'@{delay}';
  418. -o-transition-delay: ~'@{delay}';
  419. transition-delay: ~'@{delay}';
  420. }
  421. // Rotate
  422. //
  423. // ___ .rotation()
  424. // |
  425. // | 1 param : @degree
  426. //
  427. // ___ .rotate()
  428. // |
  429. // | Tentative de compatibilté étendue (fonctionne uniquement pour 0, 90, 180 ou 270 degrés).
  430. // |
  431. // | 1 param : @degree
  432. // | 3 params : @degree / @originX / @originY
  433. //
  434. .rotation(@deg:5deg)
  435. {
  436. -webkit-transform: rotate(@deg);
  437. -moz-transform: rotate(@deg);
  438. transform: rotate(@deg);
  439. }
  440. .rotate(@value, @originX:0%, @originY:0%, @unit:'deg')
  441. {
  442. // filter: progid:DXImageTransform.Microsoft.BasicImage(rotation = (360 / @value) + 1); //0, 1, 2, or 3 rotate 0, 90, 180 or 270
  443. -webkit-transform: rotate(~"@{value}@{unit}"); // ~"@{value}@{unit}" rather than @value@unit remove the spaces between value and unit.
  444. -moz-transform: rotate(~"@{value}@{unit}");
  445. -ms-transform: rotate(~"@{value}@{unit}");
  446. -o-transform: rotate(~"@{value}@{unit}");
  447. transform: rotate(~"@{value}@{unit}");
  448. -webkit-transform-origin:@originX @originY;
  449. -moz-transform-origin:@originX @originY;
  450. -ms-transform-origin:@originX @originY;
  451. -o-transform-origin:@originX @originY;
  452. transform-origin:@originX @originY;
  453. }
  454. // Scale
  455. .scale(@ratio:1.5)
  456. {
  457. -webkit-transform:scale(@ratio);
  458. -moz-transform:scale(@ratio);
  459. transform:scale(@ratio);
  460. }
  461. // Translate
  462. .translate(@x:0, @y:0)
  463. {
  464. -webkit-transform: translate(@x, @y);
  465. -moz-transform: translate(@x, @y);
  466. -ms-transform: translate(@x, @y);
  467. -o-transform: translate(@x, @y);
  468. transform: translate(@x, @y);
  469. }
  470. // Columns
  471. .columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px)
  472. {
  473. -webkit-column-width : @colwidth;
  474. -webkit-column-count : @colcount;
  475. -webkit-column-gap : @colgap;
  476. -webkit-column-rule-color: @columnRuleColor;
  477. -webkit-column-rule-style: @columnRuleStyle;
  478. -webkit-column-rule-width: @columnRuleWidth;
  479. -moz-column-width : @colwidth;
  480. -moz-column-count : @colcount;
  481. -moz-column-gap : @colgap;
  482. -moz-column-rule-color: @columnRuleColor;
  483. -moz-column-rule-style: @columnRuleStyle;
  484. -moz-column-rule-width: @columnRuleWidth;
  485. column-width : @colwidth;
  486. column-count : @colcount;
  487. column-gap : @colgap;
  488. column-rule-color: @columnRuleColor;
  489. column-rule-style: @columnRuleStyle;
  490. column-rule-width: @columnRuleWidth;
  491. }
  492. .edit-link(@bc:#CCFF2F,@c:#333)
  493. {
  494. .dib;
  495. background-color:@bc;
  496. border:1px solid;
  497. border-color:darken(desaturate(@bc, 35%),15%) darken(desaturate(@bc, 35%),15%) darken(desaturate(@bc, 35%),20%);
  498. .rounded;
  499. color: @c;
  500. cursor: pointer;
  501. .font-size(.8em,1em);
  502. font-weight: normal;
  503. padding: 0.25em 0.75em;
  504. margin-top:.5em;
  505. &:hover{background-color:darken(@bc, 20%);}
  506. &:active{
  507. text-shadow: 0 1px 0 lighten(@bc,5%);
  508. background-color:darken(@bc, 20%);
  509. //.inset-shadow(0,0,2px,darken(@bc,60));
  510. }
  511. }
  512. .loader(@fc:#000,@bc:#ccc,@h:8px,@radius:0px)
  513. {
  514. // Safari/chrome
  515. &::-webkit-progress-bar{background-color:@bc;.rounded(@radius);}
  516. &::-webkit-progress-value{background-color:@fc;.rounded(@radius);}
  517. // Firefox
  518. &{background-color:@bc;.rounded(@radius);height:@h;}
  519. &::-moz-progress-bar{background-color:@fc;.rounded(@radius);}
  520. }
  521. // =
  522. // =
  523. // =
  524. // =
  525. // =
  526. // ===== RETINA ==========================================================================================================
  527. // retina.less
  528. // A helper mixin for applying high-resolution background images (http://www.retinajs.com)
  529. .at2x(@path, @w: auto, @h: auto) {
  530. background-image: url(@path);
  531. @at2x_path: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`;
  532. @media all and (-webkit-min-device-pixel-ratio : 1.5) {
  533. background-image: url(@at2x_path);
  534. background-size: @w @h;
  535. }
  536. }