// base color
$blue:#324157;
$light-blue:#3A71A8;
$red:#C03639;
$pink: #E65D6E;
$green: #30B08F;
$tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;

// sidebar
$menuText:#bfcbd9;
//$menuActiveText:#409EFF;
$menuActiveText:#FFF;
$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
//$menuBg:#304156;
$menuBg:#001b44;
$leftMenuBg:transparent;
//$menuHover:#263445;
$leftMenuHover:linear-gradient(to right, rgba(0,102,228, .9), rgba(0,188,255, .9));
$subMenuBg:rgba(27,58,99, .7);
$subMenuHover:linear-gradient(to right, rgba(0,102,228, .9), rgba(0,188,255, .9));


//$sideBarWidth: 205px;
$sideBarWidth: 12.395vw;
$sideBarMargin: 0vw;
$sideBarMin:2.812vw;
$sideBarSpacingPx:10px;
$subNavbarColor:#9ae8fe;

// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
	menuText: $menuText;
	menuActiveText: $menuActiveText;
	subMenuActiveText: $subMenuActiveText;
	menuBg: $menuBg;
	leftMenuBg:$leftMenuBg;
	menuHover: $leftMenuHover;
	subMenuBg: $subMenuBg;
	subMenuHover: $subMenuHover;
	sideBarWidth: $sideBarWidth;
	subNavbarColor: $subNavbarColor;
}
