Drift Angular
  • Overview
  • Package Content
  • Installation and Setup
    • Setup Environment
    • Setup Project
    • Setup Layout
    • Deployment
  • Structure
    • Folders and Files Structure
    • Layouts
    • Drift Icons
  • Stylesheets
    • Overview
    • Sass Variables
    • Layouts & Theme
    • Fonts
    • Colors
    • Back Ground Images
    • Margin & Paddings
    • Theme Customization
    • RTL Version
  • Settings
    • Template Setting
    • Customize Horizontal Menu
    • Customize Vertical Menu
    • Create a Page
    • Define Routes
    • Root Loader
    • RTL
    • Internationalization
  • Components
    • Alerts
    • Badges
    • Breadcrumbs
    • Buttons
    • Button Group
    • Cards
    • Card Group
    • Collapse
    • Dropdowns
    • Progress Bar
    • Tabs
Powered by GitBook
On this page

Was this helpful?

  1. Stylesheets

Layouts & Theme

Classes related to layouts

This section covers the documentation about the classes which builds the layout .

The following table details about those classes:

/* Layout Related Classes
-------------------------------- */
/* Below is a unique class for default layout. For other layouts, 
you can replace default (after --) with the name of those layouts.
for example .dt-layout--crm */
.dt-layout--default  



/* Sidebar Related Classes (Only for layouts with sidebar)
-------------------------------- */
/* To fix the sidebar */
.dt-sidebar--fixed   

/* To make the sidebar folded */
.dt-sidebar--folded  

/* To expend the sidebar
(Drift uses this on on-hover event when the sidebar is in folded mode) */
.dt-sidebar--expended  



/* Header Related Classes (Only for default layouts)
-------------------------------- */
/* To fix the header */
.dt-header--fixed   



/* Framing Related Classes 
--------------------------------- */
/* To make the framing fluid */
.dt-layout--full-width  

/* To make the framing covered from all four sides */
.dt-layout--framed   

/* To make the framing in boxed style (or fixed width) */
.dt-layout--boxed    



/* Theme Related Classes (only for default layout)
---------------------------------- */
/* To apply the semi-dark theme */
.theme-semidark      

/* To apply the light theme */
.theme-light         

/* To apply the dark theme */
.theme-dark  

The following classes are related to the layouts with drawer and will be applied to sidebar:

/* to convert the sidebar into drawer */
.dt-drawer

/* To switch the drawer position either right or left */
.position-right
.position-left
PreviousSass VariablesNextFonts

Last updated 5 years ago

Was this helpful?