layout.scss 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  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. }
  65. h1, h2, h3, h4, h5, h6{
  66. font-family: inherit;
  67. }
  68. h1{
  69. font-weight: bold;
  70. }
  71. figure {
  72. margin: 0;
  73. }
  74. input[type="checkbox"] + label{
  75. margin:0;
  76. }
  77. p{
  78. font-family: inherit;
  79. font-weight: inherit;
  80. font-size: inherit;
  81. line-height: inherit;
  82. margin-bottom: inherit;
  83. }
  84. a{
  85. font-size: inherit;
  86. }
  87. .column, .columns {
  88. padding: inherit;
  89. float: inherit;
  90. }
  91. $rootminwidth : 320px;
  92. /** NIVEAU 0 */
  93. #root{
  94. min-width:$rootminwidth;
  95. .ie8 &{min-width:1024px;}
  96. }
  97. /** NIVEAU 1 */
  98. #container{
  99. margin:0 auto; position:relative;
  100. @include transition(padding-top 0.5s ease-out); // change this
  101. // padding:0 1em;
  102. }
  103. /** NIVEAU 2 */
  104. @mixin padded(){ $p:2%; width:96%; padding-left:$p; padding-right:$p; }
  105. // @mixin padded(){width:100%;}
  106. $header-z-index:1000;
  107. #header{
  108. @media #{$medium-up}{
  109. position:fixed; top:0; margin:0 auto; background-color: #fff; min-width:$rootminwidth*0.97;
  110. } //change this
  111. z-index:$header-z-index;
  112. @include padded;
  113. .admin-menu &{ margin-top:35px; }
  114. }
  115. #utilities{
  116. @media #{$medium-up}{
  117. html.no-touch &{
  118. position:fixed; top:0; margin:0 auto; min-width:$rootminwidth*0.97;
  119. margin-top:60px;
  120. }
  121. html.no-touch .admin-menu &{ margin-top:85px; }
  122. }
  123. @media #{$small-only}{
  124. >.region{padding-top:5px; padding-bottom:5px;}
  125. } //change this
  126. z-index:999;
  127. @include bgc(#fff);
  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.home-v2,
  159. body.page-whoweare,
  160. body.node-type-page,
  161. body.node-type-webform,
  162. body.page-cart-checkout{
  163. #header>.inner, #utilities>.inner, #center, #footer{
  164. @include grid-row();
  165. }
  166. // #header,#utilities{
  167. // position:relative;
  168. // }
  169. }