layout.scss 2.3 KB

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