_layout.scss 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. body, html{
  2. position: relative;
  3. width: 100%;
  4. height:100%;
  5. font-family: sans-serif;
  6. font-style: normal;
  7. margin:0;
  8. padding:0;
  9. }
  10. body{
  11. overflow-x:hidden;
  12. }
  13. div.dialog-off-canvas-main-canvas{
  14. width: 100vw;
  15. height:100vh;
  16. display: flex;
  17. flex-direction: column;
  18. }
  19. body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
  20. padding-top: 24px!important;
  21. }
  22. // define breakpoints media query for each card column number
  23. // $i: 1;
  24. // $colw: $column_width;
  25. // $m: $column_goutiere;
  26. // $bp: $colw + $m;
  27. // @while $bp < 4096px {
  28. // $upbp: $bp + $colw + $m;
  29. // // @media only screen and (min-width: $bp + 1px) and (max-width: $upbp) {
  30. // // width:$bp;
  31. // // }
  32. // breakpoint-#{$i}: ("bp":$bp, "upbp":$upbp);
  33. // // @mixin col_breakpoint_#{$i}() {
  34. // // @media (min-width: $bp + 1px) and (max-width: $upbp) {
  35. // // @content;
  36. // // }
  37. // // }
  38. // $bp: $upbp;
  39. // $i: $i + 1;
  40. // }
  41. // @mixin col-mediaquery($i) {
  42. // @media (min-width: map.get(#{$breakpoint-$i}, "bp") + 1px) and (max-width: map.get(#{$breakpoint-$i}, "upbp")) {
  43. // @content;
  44. // }
  45. // }
  46. @mixin col-mediaquery-min-max($min, $max) {
  47. $bp: ($column_width + $column_goutiere) * $min + 1px;
  48. $upbp: ($column_width + $column_goutiere) * ($max);
  49. @media (min-width: $bp) and (max-width: $upbp) {
  50. @content;
  51. }
  52. }
  53. @mixin col-mediaquery-min($i) {
  54. $bp: ($column_width + $column_goutiere) * $i + 1px;
  55. @media (min-width: $bp) {
  56. @content;
  57. }
  58. }
  59. @mixin col-mediaquery-max($i) {
  60. $bp: ($column_width + $column_goutiere) * $i;
  61. @media (max-width: $bp) {
  62. @content;
  63. }
  64. }
  65. // build break points for each multiple of cards row
  66. // cards will always be centered, using all available space
  67. %grided-width{
  68. margin:0 auto;
  69. $m: $column_goutiere;
  70. $colw: $column_width;
  71. // $bp: ($colw + $m) * 2;
  72. $bp: $colw + $m;
  73. $i: 1;
  74. @while $bp < 4096px {
  75. $upbp: $bp + $colw + $m;
  76. @if $i == 1 {
  77. @media only screen and (max-width: $bp) {
  78. width:$bp;
  79. }
  80. }@else{
  81. @media only screen and (min-width: $bp + 1px) and (max-width: $upbp) {
  82. width:$bp;
  83. }
  84. }
  85. $bp: $upbp;
  86. $i: $i + 1;
  87. }
  88. // outline:1px blue solid;
  89. // &>*{
  90. // outline:1px red solid;
  91. // }
  92. }
  93. // _ _ _
  94. // | || |___ __ _ __| |___ _ _
  95. // | __ / -_) _` / _` / -_) '_|
  96. // |_||_\___\__,_\__,_\___|_|
  97. header[role="banner"]{
  98. flex:0 0 auto;
  99. background-color: #fff;
  100. // overflow: visible;
  101. // position: fixed;
  102. // z-index: 20;
  103. width:100vw;
  104. // height: $header_height;
  105. >.wrapper{
  106. @extend %grided-width;
  107. // box-sizing:border-box;
  108. background-color: #fff;
  109. &:after{
  110. content:"";
  111. clear:both;
  112. display: block;
  113. }
  114. .header-block{
  115. $min-height:33px;
  116. min-height: $min-height;
  117. font-size: 0;
  118. &>*{
  119. font-size: $base_font_size;
  120. }
  121. &.header-right{
  122. text-align: right;
  123. }
  124. .header-block-wrapper{
  125. &>*{
  126. display: inline-block;
  127. vertical-align:top;
  128. text-align: left;
  129. }
  130. }
  131. input#header-block-right-toggle{display: none;}
  132. label[for="header-block-right-toggle"]{display:none;}
  133. @include col-mediaquery-max(3){
  134. &.header-left{ width: 75%; }
  135. &.header-right{
  136. width: 23%;
  137. label[for="header-block-right-toggle"]{
  138. display:block;
  139. }
  140. // default position (hidden, translated right)
  141. $w: 20em;
  142. .header-block-wrapper{
  143. z-index: 100;
  144. position: absolute;
  145. top: $min-height;
  146. right:0;
  147. // right: - $w - 150px;
  148. box-sizing: border-box;
  149. // transform: translateX(450px);
  150. overflow: hidden;
  151. width:0.1px;
  152. box-shadow: 0 0 0 #fff;
  153. padding:1em 0;
  154. margin-top: 0.7em;
  155. transition: all 0.5s ease-in-out;
  156. >*.block, >div#user-tools{
  157. display: block;
  158. width: $w - 2em;
  159. padding:0 0 1em 0!important;
  160. margin:0 0 1em 0!important;
  161. text-align: right;
  162. border-left: none!important;
  163. border-right: none!important;
  164. &:not(:last-child){
  165. border-bottom: 1px solid #ccc!important;
  166. }
  167. }
  168. #user-flags{
  169. width: $w - 2em;
  170. padding:1em 0 0 0!important;
  171. margin:1em 0 0 0!important;
  172. border-top: 1px solid #ccc!important;
  173. }
  174. }
  175. // input checked, wrapper visible
  176. input#header-block-right-toggle:checked ~ div.header-block-wrapper {
  177. // transform: translateX(1px);
  178. // right:1px;
  179. width: $w;
  180. padding:1em 1em;
  181. box-shadow: -2px 2px 4px #ccc;
  182. }
  183. }
  184. }
  185. }
  186. }
  187. }
  188. // __ __ _
  189. // | \/ |__ _(_)_ _
  190. // | |\/| / _` | | ' \
  191. // |_| |_\__,_|_|_||_|
  192. main[role="main"]{
  193. flex:1 1 auto;
  194. overflow-y: auto;
  195. overflow-x: hidden;
  196. >.scroller{
  197. width:100vw;
  198. >.wrapper{
  199. @extend %grided-width;
  200. display: flex;
  201. flex-direction: row-reverse;
  202. @include col-mediaquery-max(2){
  203. display: block;
  204. }
  205. #content-left{
  206. flex-basis: $column_width;
  207. flex-shrink: 0;
  208. // width:$column_width*2+$column_goutiere;
  209. >*{
  210. width:100%;
  211. box-sizing: border-box;
  212. padding:0.5em $column_goutiere;
  213. }
  214. @include col-mediaquery-max(2){
  215. padding-right: $column_goutiere;
  216. }
  217. }
  218. #content-center{
  219. flex-basis: 110%;
  220. }
  221. }
  222. }
  223. }
  224. // ___ _
  225. // | __|__ ___| |_ ___ _ _
  226. // | _/ _ \/ _ \ _/ -_) '_|
  227. // |_|\___/\___/\__\___|_|
  228. footer[role="contentinfo"]{
  229. >.wrapper{
  230. @extend %grided-width;
  231. }
  232. }