layout.scss 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  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. // Here we define the breakpoints which will become the upper border for each media size.
  15. // The function em-calc() calculates the em-value from a px-value.
  16. /*
  17. $small-breakpoint: em-calc(480) !default;
  18. $medium-breakpoint: em-calc(768) !default;
  19. $large-breakpoint: em-calc(980) !default;
  20. $xlarge-breakpoint: em-calc(1200) !default;
  21. $small-range: (0, $small-breakpoint) !default; // 0, 480px
  22. $medium-range: ($small-breakpoint + em-calc(1), $medium-breakpoint) !default; 481px, 768px //
  23. $large-range: ($medium-breakpoint + em-calc(1), $large-breakpoint) !default; // 769px, 980px
  24. $xlarge-range: ($large-breakpoint + em-calc(1), $xlarge-breakpoint) !default; // 981px, 1200px
  25. $xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999)) !default; // 1201px, ...
  26. // Media Queries
  27. $screen: "only screen" !default;
  28. $landscape: "#{$screen} and (orientation: landscape)" !default;
  29. $portrait: "#{$screen} and (orientation: portrait)" !default;
  30. $small-up: $screen !default;
  31. $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})" !default;
  32. $medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
  33. $medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;
  34. $large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
  35. $large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;
  36. $xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;
  37. $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;
  38. $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
  39. $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;
  40. $retina: (
  41. "#{$screen} and (-webkit-min-device-pixel-ratio: 2)",
  42. "#{$screen} and (min--moz-device-pixel-ratio: 2)",
  43. "#{$screen} and (-o-min-device-pixel-ratio: 2/1)",
  44. "#{$screen} and (min-device-pixel-ratio: 2)",
  45. "#{$screen} and (min-resolution: 192dpi)",
  46. "#{$screen} and (min-resolution: 2dppx)"
  47. );
  48. */
  49. $row-width: rem-calc(1280);
  50. *{
  51. box-sizing: content-box;
  52. &:before, &:after{
  53. box-sizing: content-box;
  54. }
  55. }
  56. html, body{
  57. // position:relative;
  58. // overflow:hidden;
  59. // width:100%;
  60. // height:100%;
  61. }
  62. body{
  63. overflow-y:scroll; top:0;
  64. background-color: $creme;
  65. }
  66. h1, h2, h3, h4, h5, h6{
  67. font-family: inherit;
  68. }
  69. h1{
  70. font-weight: bold;
  71. }
  72. figure {
  73. margin: 0;
  74. }
  75. input[type="checkbox"] + label{
  76. margin:0;
  77. }
  78. p{
  79. font-family: inherit;
  80. font-weight: inherit;
  81. font-size: inherit;
  82. line-height: inherit;
  83. margin-bottom: inherit;
  84. }
  85. a{
  86. font-size: inherit;
  87. }
  88. .column, .columns {
  89. padding: inherit;
  90. float: inherit;
  91. }
  92. $rootminwidth : 320px;
  93. /** NIVEAU 0 */
  94. #root{
  95. min-width:$rootminwidth;
  96. .ie8 &{min-width:1024px;}
  97. }
  98. /** NIVEAU 1 */
  99. #container{
  100. margin:0 auto; position:relative;
  101. @include transition(padding-top 0.5s ease-out); // change this
  102. // padding:0 1em;
  103. }
  104. /** NIVEAU 2 */
  105. @mixin padded(){ $p:2%; width:96%; padding-left:$p; padding-right:$p; }
  106. // @mixin padded(){width:100%;}
  107. $header-z-index:1000;
  108. #header{
  109. @media #{$medium-up}{
  110. position:fixed; top:0; margin:0 auto; background-color: #fff; min-width:$rootminwidth*0.97;
  111. } //change this
  112. z-index:$header-z-index;
  113. @include padded;
  114. .admin-menu &{ margin-top:35px; }
  115. }
  116. #utilities{
  117. @media #{$medium-up}{
  118. html.no-touch &{
  119. position:fixed; top:0; margin:0 auto; min-width:$rootminwidth*0.97;
  120. margin-top:60px;
  121. }
  122. html.no-touch .admin-menu &{ margin-top:85px; }
  123. }
  124. @media #{$small-only}{
  125. >.region{padding-top:5px; padding-bottom:5px;}
  126. } //change this
  127. z-index:999;
  128. @include padded;
  129. }
  130. #main{
  131. @include padded;
  132. overflow-x:hidden;
  133. }
  134. #footer{
  135. @include padded;
  136. padding-top: 2em;
  137. }
  138. /** NIVEAU 3 */
  139. .js #content-top{}
  140. // .js #content{ overflow-y:hidden; }
  141. // #container, #header-blocks, #center{.transition(width, 0.5s, ease-out); }
  142. // .footer-block .region, .header-block{ @include inlineblock();} change this
  143. /** NIVEAU 4 */
  144. #center{
  145. //padding:5px;
  146. }
  147. /** Z-INDEX */
  148. #block-feedback-form{z-index:1001;}
  149. #admin-menu{z-index:1002;}
  150. #admin-toolbar{z-index:1003;}
  151. /*
  152. __ __ ___
  153. / / / /___ ____ ___ ___ _ _|__ \
  154. / /_/ / __ \/ __ `__ \/ _ \ | | / /_/ /
  155. / __ / /_/ / / / / / / __/ | |/ / __/
  156. /_/ /_/\____/_/ /_/ /_/\___/ |___/____/
  157. */
  158. body.front:not(.page-actuality),
  159. body.page-whoweare,
  160. body.page-node-11187,
  161. body.page-node-11175,
  162. body.page-node-12324,
  163. body.page-user,
  164. body.page-node-11186,
  165. body.page-cart{
  166. #header>.inner, #utilities>.inner, #center, #footer{
  167. @include grid-row();
  168. }
  169. // #header,#utilities{
  170. // position:relative;
  171. // }
  172. }