LittleDemon WebShell

// @required


//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
//
// Attention! If you changed the values in this file -
// do not forget to copy them to the file _trx_addons.vars.css
// in plugin "ThemeREX Addons"
//
//!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!



// General settings
//------------------------------------------

// Attention! If you change values below - don't forget to change default values
// in the appropriate parameters in the Theme Options: 'page_width', 'page_boxed_extra', 'sidebar_width', 'sidebar_gap'
$page: 	           1270px;				// Width of the whole page
$page_boxed_extra:   60px;				// Width of the extra side space on boxed pages
$sidebar:           380px;				// Sidebar width
$gap:	             80px;				// Gap between content and sidebar

$content: $page - $sidebar - $gap;		// Content width

$sidebar_prc: $sidebar / $page;			// Relative width of the sidebar
$gap_prc: $gap / $page;					// Relative width of the gap

$page_boxed: $page + $page_boxed_extra * 2;	// Width of the whole page (boxed)

$page_fullwide:     1920px;				// Max-width of the whole page (fullwidth)
$paddings_fullwide:  130px;				// Horizontal paddings of the fullwidth page

$grid_gap:            50px;				// Gap between columns in the grid

$elm_gap_narrow:      10px;
$elm_gap_default:     20px;
$elm_gap_extended:    $grid_gap;
$elm_gap_wide:        40px;
$elm_gap_wider:       60px;

$elm_add_page_margins: $elm_gap_extended;

$theme_icons: "fontello";				// font-family for the font with theme-specific icons
$trx_addons_icons: "trx_addons_icons";	// font-family for the font with plugin-specific icons

$hide_scrollbars_in_gb: false;			// Hide scrollbars in the editor area and in the sidebar in WordPress 5.0+ (or Gutenberg)



// Responsive
//------------------------------------------

// By screen size
$media_xxl:			"(max-width: 1679px)";
$media_xl:			"(max-width: 1439px)";
$media_lg:			"(max-width: 1279px)";
$media_md_over:		"(min-width: 1024px)";
$media_md:			"(max-width: 1023px)";
$media_sm:			"(max-width: 767px)";
$media_sm_wp:		"(max-width: 600px)";
$media_xs:			"(max-width: 479px)";

// By device
$media_wide:		"(min-width: 2160px)";
$media_desktop:		"(min-width: 1680px) and (max-width: 2159px)";
$media_notebook:	"(min-width: 1280px) and (max-width: 1679px)";
$media_tablet:		"(min-width: 768px) and (max-width: 1279px)";
$media_not_mobile:	"(min-width: 768px)";
$media_mobile:		"(max-width: 767px)";


// --xl
$xl_page: 1100px;									// Width of the whole page
$xl_sidebar: $xl_page * $sidebar_prc;				// Sidebar width
$xl_gap: $xl_page * $gap_prc;						// Gap between content and sidebar
$xl_content: $xl_page - $xl_sidebar - $xl_gap;		// Content width

$xl_page_boxed: $xl_page - 80px;					// Width of the whole page (boxed)
$xl_sidebar_boxed: $xl_page_boxed * $sidebar_prc;	// Sidebar width on the boxed pages
$xl_gap_boxed: $xl_page_boxed * $gap_prc;			// Gap between content and sidebar
$xl_content_boxed: $xl_page_boxed - $xl_gap_boxed - $xl_sidebar_boxed;	// Content width on the boxed pages

$xl_paddings_fullwide: 90px;						// Horizontal paddings of the fullwidth page

$xl_menu_side: 70px;								// Sidemenu width
$xl_page_menu_side: $xl_page - $xl_menu_side;		// Width of page with side menu

$xl_grid_gap: 30px;									// Gap between columns in the grid

$xl_elm_gap_narrow: 10px;
$xl_elm_gap_default: 20px;
$xl_elm_gap_extended: $xl_grid_gap;
$xl_elm_gap_wide: 40px;
$xl_elm_gap_wider: 60px;

$xl_elm_add_page_margins: $xl_elm_gap_extended;


// --lg
$lg_page: 964px;									// Width of the whole page
$lg_sidebar: $lg_page * $sidebar_prc;				// Sidebar width
$lg_gap: $lg_page * $gap_prc;						// Gap between content and sidebar
$lg_content: $lg_page - $lg_sidebar - $lg_gap;		// Content width

$lg_menu_side: 60px;								// Sidemenu width
$lg_page_menu_side: $lg_page - $lg_menu_side;		// Width of page with side menu

$lg_grid_gap: 30px;									// Gap between columns in the grid

$lg_elm_gap_narrow: 10px;
$lg_elm_gap_default: 20px;
$lg_elm_gap_extended: $lg_grid_gap;
$lg_elm_gap_wide: 40px;
$lg_elm_gap_wider: 60px;

$lg_elm_add_page_margins: $lg_elm_gap_extended;


// --md
$md_page: 708px;			// Width of the whole page
$md_content: $md_page;		// Content width

$md_menu_side: 60px;		// Sidemenu width
$md_page_menu_side: $md_content - $md_menu_side;	// Width of page with side menu

$md_grid_gap: 30px;			// Gap between columns in the grid

$md_elm_gap_narrow: 10px;
$md_elm_gap_default: 20px;
$md_elm_gap_extended: $md_grid_gap;
$md_elm_gap_wide: 40px;
$md_elm_gap_wider: 60px;

$md_elm_add_page_margins: $md_elm_gap_extended;


// --sm
$sm_page: 440px;			// Content width
$sm_content: $sm_page;		// Width of the whole page

$sm_menu_side: 60px;		// Sidemenu width

$sm_grid_gap: 20px;			// Gap between columns in the grid
$sm_grid_max_columns: 1;	// Max columns in the row of the grid

$sm_elm_gap_narrow: 8px;
$sm_elm_gap_default: 10px;
$sm_elm_gap_extended: $sm_grid_gap;
$sm_elm_gap_wide: 30px;
$sm_elm_gap_wider: 40px;

$sm_elm_add_page_margins: $sm_elm_gap_extended;


// --xs
$xs_page: 280px;			// Content width
$xs_content: $xs_page;		// Width of the whole page

$xs_menu_side: 60px;		// Sidemenu width

$xs_grid_gap: 20px;			// Gap between columns in the grid
$xs_grid_max_columns: 1;	// Max columns in the row of the grid

$xs_elm_gap_narrow: 8px;
$xs_elm_gap_default: 10px;
$xs_elm_gap_extended: $xs_grid_gap;
$xs_elm_gap_wide: 30px;
$xs_elm_gap_wider: 40px;

$xs_elm_add_page_margins: $xs_elm_gap_extended;