Appearance

Layout Styles ​

File Information ​

  • Path: app/assets/scss/layout/_layout.scss
  • Purpose: Main layout container styles
  • Type: Layout component

Overview ​

The layout file contains styles for the main application layout containers, including the main content area and body container.

Key Components ​

.collage-main ​

Main application container:

  • Position: Relative
  • Display: Flex column
  • Height: calc(100svh - 80px)
  • Background: White
  • Transition: Smooth transitions

.collage-body ​

Main content body:

  • Display: Flex column
  • Position: Relative
  • Padding: 40px
  • Height: 100%
  • Transition: Smooth transitions
  • Custom scrollbar: Padding-right 36px

Responsive Design ​

Desktop (min-width: 1280px) ​

  • Body margin-left: 300px (sidebar width)
  • Mini sidebar: Margin-left 92px

Tablet (max-width: 1280.98px) ​

  • Main height: calc(100svh - 64px)
  • Body padding: 24px
  • Custom scrollbar: Padding-right 20px

Mobile (max-width: 960.98px) ​

  • Body padding: 16px
  • Custom scrollbar: Padding-right 12px