_layout.scss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. @use '@growi/core-styles/scss/bootstrap/init' as bs;
  2. @use './variables' as var;
  3. body {
  4. min-height: 100vh;
  5. }
  6. .dynamic-layout-root {
  7. @extend .flex-expand-vert;
  8. }
  9. .grw-bg-image-wrapper {
  10. position: fixed;
  11. width: 100%;
  12. height: 100%;
  13. img {
  14. object-fit: cover;
  15. object-position: bottom;
  16. }
  17. }
  18. .grw-scrollable-modal-body {
  19. max-height: calc(100vh - 330px);
  20. overflow-y: scroll;
  21. }
  22. .page-wrapper {
  23. display: flex;
  24. flex-direction: column;
  25. }
  26. // padding settings for GrowiNavbarBottom
  27. .page-wrapper {
  28. padding-bottom: var.$grw-navbar-bottom-height;
  29. @include bs.media-breakpoint-up(md) {
  30. padding-bottom: unset;
  31. }
  32. }
  33. .main {
  34. margin-top: 1rem;
  35. @include bs.media-breakpoint-up(md) {
  36. margin-top: 2rem;
  37. }
  38. @include bs.media-breakpoint-up(lg) {
  39. margin-top: 4rem;
  40. }
  41. }
  42. // md/lg layout padding
  43. .ps-sidebar {
  44. @include bs.media-breakpoint-between(md, xl) {
  45. padding-left: var.$grw-sidebar-nav-width;
  46. }
  47. }
  48. .wide-gutter-x-lg {
  49. @include bs.media-breakpoint-up(lg) {
  50. &,
  51. .container,
  52. .container-fluid,
  53. .container-xxl,
  54. .container-xl,
  55. .container-lg {
  56. --bs-gutter-x: 3rem;
  57. }
  58. }
  59. // set to double value to allow space for .revision-head-link
  60. @include bs.media-breakpoint-up(xl) {
  61. &,
  62. .container,
  63. .container-fluid,
  64. .container-xxl,
  65. .container-xl,
  66. .container-lg {
  67. padding-left: calc(var(--bs-gutter-x) * 1);
  68. }
  69. }
  70. }
  71. // printable style
  72. @media print {
  73. body {
  74. padding: 30px;
  75. }
  76. a::after {
  77. display: none !important;
  78. }
  79. .main {
  80. header {
  81. border-bottom: solid 1px bs.$secondary;
  82. h1 {
  83. font-size: 2em;
  84. color: black;
  85. }
  86. }
  87. .row {
  88. display: block !important;
  89. }
  90. .meta {
  91. margin-top: 32px;
  92. color: bs.$secondary;
  93. border-top: solid 1px bs.$gray-300;
  94. }
  95. }
  96. }