gui.scss 18 KB

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