app.layout.boxed.less 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. html{
  2. background: url('../img/bg.jpg');
  3. background-attachment: fixed;
  4. background-size: cover;
  5. }
  6. .app.container{
  7. padding-left: 0;
  8. padding-right: 0;
  9. }
  10. @media (min-width: 768px) {
  11. .app.container{
  12. width: 750px;
  13. .box-shadow(0 0 30px rgba(0,0,0,0.3));
  14. .app-aside{
  15. overflow-x: hidden;
  16. }
  17. &.app-aside-folded{
  18. .app-aside{
  19. overflow-x: visible;
  20. }
  21. }
  22. &.app-aside-fixed{
  23. .aside-wrap{
  24. left: inherit;
  25. }
  26. &.app-aside-folded{
  27. .app-aside{
  28. > ul.nav{
  29. position: absolute;
  30. }
  31. }
  32. }
  33. }
  34. .app-header,
  35. .app-aside{
  36. max-width: 750px;
  37. }
  38. .app-footer-fixed{
  39. left: auto;
  40. right: auto;
  41. width: 100%;
  42. max-width: 750 - @app-aside-width;
  43. }
  44. &.app-aside-folded{
  45. .app-footer-fixed{
  46. max-width: 750 - @app-aside-folded-width;
  47. }
  48. }
  49. &.app-aside-dock{
  50. .app-footer-fixed{
  51. max-width: 750px;
  52. }
  53. }
  54. }
  55. }
  56. @media (min-width: 992px) {
  57. .app.container{
  58. width: 970px;
  59. .app-header,
  60. .app-aside{
  61. max-width: 970px;
  62. }
  63. .app-footer-fixed{
  64. max-width: 970 - @app-aside-width;
  65. }
  66. &.app-aside-folded{
  67. .app-footer-fixed{
  68. max-width: 970 - @app-aside-folded-width;
  69. }
  70. }
  71. &.app-aside-dock{
  72. .app-footer-fixed{
  73. max-width: 970px;
  74. }
  75. }
  76. }
  77. }
  78. @media (min-width: 1200px) {
  79. .app.container{
  80. width: 1170px;
  81. .app-header,
  82. .app-aside{
  83. max-width: 1170px;
  84. }
  85. .app-footer-fixed{
  86. max-width: 1170 - @app-aside-width;
  87. }
  88. &.app-aside-folded{
  89. .app-footer-fixed{
  90. max-width: 1170 - @app-aside-folded-width;
  91. }
  92. }
  93. &.app-aside-dock{
  94. .app-footer-fixed{
  95. max-width: 1170px;
  96. }
  97. }
  98. }
  99. }