layout.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. /** RESPONSIVE break points */
  2. @max-480 : ~"screen and (max-width: 479px)";
  3. @min-480 : ~"screen and (min-width: 480px)";
  4. @480-768 : ~"screen and (min-width: 480px) and (max-width: 767px)";
  5. @max-768 : ~"screen and (max-width: 767px)";
  6. @min-768 : ~"screen and (min-width: 768px)";
  7. @768-980 : ~"screen and (min-width: 768px) and (max-width: 979px)";
  8. @max-980 : ~"screen and (max-width: 979px)";
  9. @min-980 : ~"screen and (min-width: 980px)";
  10. @980-1200 : ~"screen and (min-width: 980px) and (max-width: 1199px)";
  11. @max-1200 : ~"screen and (max-width: 1199px)";
  12. @min-1200 : ~"screen and (min-width: 1200px)";
  13. html, body{
  14. // position:relative;
  15. // overflow:hidden;
  16. // width:100%;
  17. // height:100%;
  18. }
  19. body{
  20. overflow-y:scroll; top:0;
  21. }
  22. @rootminwidth : 320px;
  23. /** NIVEAU 0 */
  24. #root{
  25. min-width:@rootminwidth;
  26. .ie8 &{min-width:1024px;}
  27. }
  28. /** NIVEAU 1 */
  29. #container{ margin:0 auto; position:relative; .transition(padding-top, 0.5s, ease-out);}
  30. /** NIVEAU 2 */
  31. .padded(){ @p:2%; width:100%-2*@p; padding-left:@p; padding-right:@p; }
  32. @header-z-index:1000;
  33. #header{
  34. @media @min-768{
  35. position:fixed; top:0; margin:0 auto; .bgc(#fff); min-width:@rootminwidth*0.97;
  36. }
  37. z-index:@header-z-index;
  38. .padded;
  39. .editmenu-enabled &{ .mt(30px); }
  40. .admin-menu &{ .mt(35px); }
  41. }
  42. #utilities{
  43. @media @min-768{
  44. html.no-touch &{
  45. position:fixed; top:0; margin:0 auto; min-width:@rootminwidth*0.97;
  46. .mt(60px);
  47. }
  48. html.no-touch .editmenu-enabled &{ .mt(80px); }
  49. html.no-touch .admin-menu &{ .mt(85px); }
  50. }
  51. @media @max-768{
  52. >.region{.pt(5px); .pb(5px);}
  53. }
  54. z-index:999;
  55. .bgc(#fff);
  56. .padded;
  57. }
  58. #main{.padded; overflow-x:hidden;}
  59. #footer{.padded;}
  60. /** NIVEAU 3 */
  61. .js #content-top{}
  62. // .js #content{ overflow-y:hidden; }
  63. // #container, #header-blocks, #center{.transition(width, 0.5s, ease-out); }
  64. .footer-block .region, .header-block{ .inlineblock();}
  65. /** NIVEAU 4 */
  66. #center{ padding:5px; }
  67. /** Z-INDEX */
  68. #block-feedback-form{z-index:1001;}
  69. #admin-menu{z-index:1002;}
  70. #admin-toolbar{z-index:1003;}